在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. 读书笔记--SQL必知必会04--过滤数据

    4.1 使用WHERE子句 在SELECT语句中,数据根据WHERE子句中指定搜索条件进行过滤. 搜索条件(search criteria)也称为(filter condition). WHERE子句 ...

  2. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  3. 利用Python进行数据分析(11) pandas基础: 层次化索引

      层次化索引 层次化索引指你能在一个数组上拥有多个索引,例如: 有点像Excel里的合并单元格对么? 根据索引选择数据子集   以外层索引的方式选择数据子集: 以内层索引的方式选择数据: 多重索引S ...

  4. Scala化规则引擎

    1. 引言 什么是规则引擎 一个业务规则包含一组条件和在此条件下执行的操作,它们表示业务规则应用程序的一段业务逻辑.业务规则通常应该由业务分析人员和策略管理者开发和修改,但有些复杂的业务规则也可以由技 ...

  5. 图标字体 VS 雪碧图——图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

  6. C#生成带logo的二维码

    带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类   QRCode ...

  7. 是时候 UWP 了 !

    什么是 UWP? 很多程序员都有一个梦想:希望自己开发的软件能够轻而易举的在所有平台上运行,而不是把同样的需求,用不同的技术.工具重新开发才能够运行在所有平台上.这就是跨平台,很多软件从业者都在为这个 ...

  8. 【转】Dubbo使用例子并且和Spring集成使用

    一.编写客户端和服务器端共用接口类1.登录接口类public interface LoginService {    public User login(String name, String psw ...

  9. Backbone中的model和collection在做save或者create操作时， 如何选择用POST还是PUT方法 ？

    Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行cre ...

  10. Socket简单使用

    客户端代码: import java.io.*; import java.net.*; public class DailyAdviceClient { public void go(){ try{ ...