在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. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. Http协议相关内容

    http协议概述 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义浏览器与WEB服务器之间交换数据的过程. 客户 ...

  3. 如果你也会C#，那不妨了解下F#（2）：数值运算和流程控制语法

    本文链接:http://www.cnblogs.com/hjklin/p/fs-for-cs-dev-2.html 一些废话 一门语言火不火,与语言本身并没太大关系,主要看语言的推广. 推广得好,用的 ...

  4. Jsp的九大对象，七大动作，三大指令

    jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String g ...

  5. 游戏启示录 关于Update的相关问题

    游戏启示录 关于Update的相关问题 这里说的Update是指的游戏的主循环.一般情况下.为了程序的方便控制我们一般只会有一个主循环.所有的游戏逻辑都会在这一个循环中完成.(额,其实这么做有点浪费. ...

  6. Visual Studio问题集锦：coloader80.dll未正确安装

    问题 今天在修改之前的一个项目的时候报了一个错,大概内容如下: 有一个 Visual Studio 的 DLL 文件(coloader80.dll)未正确安装.请通过"控制面板"中 ...

  7. asp.net获取数据库连接字符串

    1.添加引用 using System.Configuration; 2.代码 string strConnectionString=ConfigurationManager.AppSettings[ ...

  8. python 数据类型---列表使用之三

    1. 判断列表中是否存在一个元素: "in" 的使用 list = ['Frank', 99, 'is',78, 7,3,4,'smart'] print(99 in list) ...

  9. Java--String 和StringBuilder、StringBuffer 的区别?

    1.String是只读字符串,引用的字符串内容是无法改变的. 2.StringBuffer和StringBuilder的字符串对象可以直接进行修改. 3.StringBuilder没有被synchro ...

  10. GJM : 常用网站收集 【不断更新中... ... ... 】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...