如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:
var obj = document.getElementById("mydiv");
给节点添加css:
如果需要添加的css不多的话,可以obj.style.width = "300px";
如果需要添加多条css语句的话,这样会有多条,如:
obj.style.width="300px";
obj.style.height="300px";
obj.style.border="1px solid #ddd";
……
这样会不会显得有些麻烦,且需要重复敲写类似的语句,那么可以这样:
(1)通过自己编写js函数设置css
function setCss(obj,css){
for(var attr in css){
obj.style[attr] = css[attr];
}
}
setCss(obj,{"width":"300px","height":"300px","border":"1px solid #ddd"});
(2)通过cssText方法设置css
obj.style.cssText = "width:300px;height:300px;border:1px solid #ddd;";
这样会不会显得简单,且方便了很多呢,特别是对于新create的元素进行初始化css样式

js 设置多条css样式的更多相关文章

  1. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  2. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  4. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js设置奇偶行数样式

    $(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...

  6. 谷歌下设置滚动条的css样式

    .oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar. ...

  7. jquery设置多个css样式

    $(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...

  8. 用jQuery设置多个css样式

    $("#show_one").css({"position":"fixed","top":"0px" ...

  9. vue中设置全局的css样式

    只需在main.js    ====import './style.less'   main.js =>>   import Vue from 'vue' import App from ...

随机推荐

  1. vim 文档加密

    众所周知vim的加密方法是 :X 解密为输入:X后直接回车两次 注意此时必须使用:wq来保存,:x和shift+zz(ZZ)均无法保存此更改 此时注意 :wq"与":x" ...

  2. 【STM32】STM32串口配置的一般步骤(库函数)

    STM32串口配置的一般步骤(库函数)(1)串口时钟使能:RCC_APBxPeriphClockCmd();    GPIO时钟使能:RCC_AHBxPeriphClockCmd();(2)引脚复用映 ...

  3. MySQL_入手<一>增--数据库操作

    创建数据库 create database db_sanguo charset utf8; 切进db_sanguo use db_sanguo 创建英雄 create table t_hero( id ...

  4. Zabbix 监控常见服务

    监控Apache性能 1.客户端编译安装Apache服务,并在编译选项中开启监控页面功能. [root@localhost ~]# yum install -y gcc openssl openssl ...

  5. JS数据结构的栈和队列操作

    数据结构:列表.栈.队列.链表.字典.散列.图和二叉查找树! 排序算法:冒牌.选择.插入.希尔.归并和快速! 查找算法:顺序查找和二分查找 在平时工作中,对数组的操作很是平常,它提供了很多方法使用,比 ...

  6. [Next] 三.next自定义服务器和路由

    next 服务端渲染 实际上,next 一直都是执行的服务端渲染.npm start执行的是 next 自带的服务器来运行你的应用.next 是支持自定义服务器的,同时能够支持现有的路由和模式,你可以 ...

  7. 使用mybatis插件自动生成代码以及问题处理

    1.pom.xml中加入依赖插件 <!-- mybatis generator 自动生成代码插件 --> <plugin> <groupId>org.mybatis ...

  8. MySQL安装过程中遇到的错误代码为1045的解决方法

    mysql的安装包,及其图形化破解软件:https://pan.baidu.com/s/1PIzaEGpC9QEPUwZ8OowhCw 二级压缩包下边的 视图化管理软件:Navicat.exe   发 ...

  9. 使用python进行pdf文件分割

    Python代码 import os from pyPdf import PdfFileWriter, PdfFileReader def split(pdf_file, delta, output_ ...

  10. 使用python的selenium库刷超星网课

    网课很多看不完呀 所以动手做了一个基础的自动答题和下一节的程序 用到了python 3 selenium Chrome 如何自动化Chrome?https://www.cnblogs.com/eter ...