如果在一个网页中给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. 【AMAD】jsonschema -- (又)一个JSON Schema的Python实现

    动机 简介 用法 个人评分 动机 JSON Schema1是一个专业词汇,可以让你注解和验证JSON文档. 使用JSON Schema的好处有: 描述你的数据格式 提供清晰的易读的文档 验证数据: 用 ...

  2. Nginx的root和alias区别

    1.root 下面举例说明: location /i/ { root /data/w3; } 请求 http://foofish.net/i/top.gif 这个地址时,那么在服务器里面对应的真正的资 ...

  3. Flume 概念、模型和特点

    Flume Event - Flume 事件 - 被定义为一个具有有效荷载的字节数据流和可选的字符串属性集. Flume Agent- Flume - 代理 - 是一个进程承载从外部源事件流到下一个目 ...

  4. Git及码云学习总结

    前言 一.Git是一个版本管理工具软件. 二.windows 系统的使用: 1.git软件的安装:https://git-scm.com/downloads mac系统是自带的不用安装 windows ...

  5. Kick Start 2019 Round A Parcels

    题目大意 $R \times C$ 的网格,格子间的距离取曼哈顿距离.有些格子是邮局.现在可以把至多一个不是邮局的格子变成邮局,问每个格子到最近的邮局的曼哈顿距离的最大值最小是多少. 数据范围 $ 1 ...

  6. 设计模式:状态模式(Status)

    在介绍状态模式之前,我们先来看这样一个实例:你公司力排万难终于获得某个酒店的系统开发项目,并且最终落到了你的头上.下图是他们系统的主要工作(够简单). 当你第一眼看到这个系统的时候你就看出来了这是一个 ...

  7. [Codeforces 266E]More Queries to Array...(线段树+二项式定理)

    [Codeforces 266E]More Queries to Array...(线段树+二项式定理) 题面 维护一个长度为\(n\)的序列\(a\),\(m\)个操作 区间赋值为\(x\) 查询\ ...

  8. 2019中山纪念中学夏令营-Day1[JZOJ]

    T1 题目描述: 1999. Wexley接苹果(apple) (File IO): input:apple.in output:apple.out 时间限制: 1000 ms  空间限制: 1280 ...

  9. 数据库or、in、<>、>=、<=、butween区别

    操作前先关闭数据库缓存 #创建测试的test表 DROP TABLE IF EXISTS test; CREATE TABLE test( `id` ) NOT NULL, `name` ) DEFA ...

  10. 02:linux常用命令

    1.1 linux查看系统基本参数常用命令 1.查看磁盘 [root@linux-node1 ~]# df -hl Filesystem Size Used Avail Use% Mounted on ...