在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. C# Word中设置/更改文本方向

    C# Word中设置/更改文本方向 一般情况下在Word中输入的文字都是横向的,今天给大家分享两种方法来设置/更改一个section内的所有文本的方向及部分文本的方向,有兴趣的朋友可以试下. 首先,从 ...

  2. Python笔记之不可不知

    Python软件已经安装成功有很长一段时间了,也即或多或少的了解Python似乎也很长时间了,也是偏于各种借口,才在现在开始写点总结.起初接触Python是因为公司项目中需要利用Python来测试开发 ...

  3. 国内maven镜像，快的飞起

    在oschina关来关去的烦恼下,终于受不了去寻找其他公共库了. 阿里云maven镜像 <mirrors> <mirror> <id>alimaven</id ...

  4. Java微信公众平台接口封装源码分享

    前言:      这篇博客是在三月初动手项目的时候准备写的,但是为了完成项目只好拖延时间写这篇博客,顺便也可以在项目中应用我自己总结的的一些经验.今天看来,这些方法的应用还是可以的,至少实现了我之前的 ...

  5. Spring的IOC和AOP之深剖

    今天,既然讲到了Spring 的IOC和AOP,我们就必须要知道 Spring主要是两件事: 1.开发Bean:2.配置Bean.对于Spring框架来说,它要做的,就是根据配置文件来创建bean实例 ...

  6. 五个典型的 JavaScript 面试题

    阅读原文 在IT界,需要大量的 JavaScript 开发者.如果你的能力能够胜任这一角色,那么你将获得许多更换工作和提高薪水的机会.但是在你被公司录取之前,你需要展现你的技术实力,以便通过面试环节. ...

  7. 总结js常用函数和常用技巧（持续更新）

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. PS:此文档,我会持续更新. Aj ...

  8. dotnet core 使用 MongoDB 进行高性能Nosql数据库操作

    好久没有写过Blog, 每天看着开源的Java社区流口水, 心里满不是滋味. 终于等到了今年六月份 dotnet core 的正式发布, 看着dotnet 社区也一步一步走向繁荣, 一片蒸蒸日上的大好 ...

  9. xcode8.0升级之后公司项目遇到的问题

    xcode8升级之后项目遇到了问题,由于这个项目是我中途接手的,遇到的第三方也是自己没有用过的, AQGridViewCell,这个第三方的类主要是用于处理图片的问题,xcode开发工具升级过后,报这 ...

  10. iOS-集成支付宝支付、微信支付简单总结

    支付宝快捷支付: 官方文档中,支付宝说建议我们使用支付时要讲签名过程放在服务器端,这样安全.同时给的demo中签名是在本地移动端做的...不过支付宝的集成还是较简单的. 为了安全签名当然放后台做了.我 ...