在js中更换样式比较常见，但是批量设置比较少遇见；

但是在做就是插件时，不想额外的添加css文件（需要导入，还可能引起冲突），能批量设置就比较方便了。

以下代码是来自网上的三种方法，使用第二种最方便了。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style type="text/css">

#div1{ width:100px; height:100px; background:#069;}

</style>

<script type="text/javascript">

//第一种使用JSON

function setStyle(obj,json){

    for(var i in json)

    {

        obj.style[i]=json[i];

    }

}

window.onload=function(){

    var oDiv=document.getElementById('div1');

    //   setStyle(oDiv, {width: '200px', background: 'red'});    //第一种

    //   oDiv.style.cssText="width: 200px; height:300px; background:yellow;";  //第二种 使用cssText

　　//使用第三种 with (不推荐使用)

    with(oDiv.style)

    {

        width='300px';

        height='500px';

        background='yellow';

    }

};

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

对于第三种为啥不使用width，是因为它有存在兼容性的问题。

详解请看http://blog.sina.com.cn/s/blog_9c581bd30101adnh.html

赋值：选用“带数值和单位”的写法，如：id.style.width = "100px";

取值：var w = parseInt(id.style.width)

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

  1. 3.通过js代码设置css样式

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

  2. 5、通过js代码设置css样式

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

  3. JavaScript中批量设置Css样式

    设置 input 元素的  属性: document.getElementsByTagName("INPUT")[0].setAttribute("属性",&q ...

  4. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  5. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  6. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  7. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  8. cssText设置css样式

    js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...

  9. react学习(四)之设置 css样式 篇

    react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...

随机推荐

  1. Core Java 总结（数据类型，表达式问题）

    2016-10-18 整理 写一个程序判断整数的奇偶 public static boolean isOdd(int i){ return i % 2 == 1; } 百度百科定义:奇数(英文:odd ...

  2. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  3. 从xfire谈WebService接口化编程

    前段时间有博友在看我的博文<WebService入门案例>后,发邮件问我关于WebService 接口在java中的开发,以及在实际生产环境中的应用.想想自己入职也有一段时间了,似乎也该总 ...

  4. 《HelloGitHub月刊》第09期

    <HelloGitHub>第09期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 前言 转眼就到年底了,月刊做到了第09期,感谢大家一路的支持和帮助

  5. Discuz X3.2 网站快照被劫持的解决方法

    附上另一个人的解决方法:http://www.discuz.net/thread-3549930-3-1.html 问题如下: 快照被劫持,无论怎么申诉,怎么更新快照,都无法消除此问题,第一次打开网站 ...

  6. CSS知识总结（四）

    CSS常用样式 2.元素样式 1)宽度 width:auto|length 单位:设置以像素计的宽度值(px) 设置以百分比计的宽度值(%) 例:p {width:200px;} div {width ...

  7. 从express源码中探析其路由机制

    引言 在web开发中,一个简化的处理流程就是:客户端发起请求,然后服务端进行处理,最后返回相关数据.不管对于哪种语言哪种框架,除去细节的处理,简化后的模型都是一样的.客户端要发起请求,首先需要一个标识 ...

  8. [C#] 多线程总结(结合进度条)

    线程生命周期(来源 w3cschool) 未启动状态:当线程实例被创建但 Start 方法未被调用时的状况. 就绪状态:当线程准备好运行并等待 CPU 周期时的状况. 不可运行状态: 已经调用 Sle ...

  9. Cobar + MySQL 技术验证（li）

    一.简介 Cobar是一个对数据进行拆分后进行分布式存储的产品,可以支持使用后台的 MySQL或者Oracle数据库,通过配置,将数据按照一定规则存储入不同的数据库中.即用分布式数据库代替了集中式数据 ...

  10. 工作中常用的js、jquery自定义扩展函数代码片段

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...