在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. Java:泛型基础

    泛型 引入泛型 传统编写的限制: 在Java中一般的类和方法,只能使用具体的类型,要么是基本数据类型,要么是自定义类型.如果要编写可以应用于多种类型的代码,这种刻板的限制就会束缚很多! 解决这种限制的 ...

  2. Hadoop学习之旅一：Hello Hadoop

    开篇概述 随着计算机网络基础设施的完善,社交网络和电商的发展以及物连网的推进,产生了越来越多的大数据,使得人工智能最近几年也有了长足的发展(可供机器学习的样本数据量足够大了),大数据的存储和处理也越来 ...

  3. 浮动清除、before&after

    ::before 和 ::after属于伪元素,而 :before 和 :after属于伪类(CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号)因此如果使用了 display 或者 width 等 ...

  4. JDBC关于时间的存取

    Oracle数据库默认时间存储是java.sql.date,而java程序中的时间默认是java.util.date,所以通过JDBC存取的 时候会涉及到时间的转换问题. 1.日期存取 存入数据库的时 ...

  5. WebService 概念和工作原理(一)

    今天我们一起来学习WebService.它到底是干啥用的? Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集) ...

  6. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  7. 关于XHR对象中status范围的记录

    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 成功执行区域 // 2XX表示有效响应 ...

  8. 浅谈Hybrid技术的设计与实现第三弹——落地篇

    前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...

  9. Java Web之网上购物系统（注册、登录、浏览商品、添加购物车）

    眼看就要期末了,我的专业课也迎来了第二次的期末作业---------<网上购物系统>.虽然老师的意图是在锻炼我们后台的能力,但是想着还是不利用网上的模板,准备自己写,以来别人写的静态页看不 ...

  10. ReactiveCocoa 冷热订阅(cold subscribe, hot subscribe)

    ReactiveCocoa支持两种订阅方式,一种是冷订阅,一种是热订阅. 热订阅的特点: 1.不管有没有消息订阅着,发送者总会把消息发出去. 2.不管订阅者是什么时候订阅的,发送者总是会把相同的消息发 ...