平常编写代码,更改一个元素样式的时候,自己都是用

obj.style.width = "200px";
obj.style.position = "absolute";
obj.style.left = "100px";

之类的代码进行设置,这样的话如果更改样式很多的时候,就要写很多代码。

使用Javascript批量修改样式的方法:

cssText 的使用:

obj.cssText = " width:200px;position:absolute;left:100px;";

注意:cssText会清除之前元素含有的样式

所以得使用

obj.cssText += " width:200px;position:absolute;left:100px;";

但是再注意:在IE中的最后一个分号会被删除

obj.cssText += " ;width:200px;position:absolute;left:100px;"; 
//这样便能解决在IE中出现的问题了

其他使用cssText的方法:

//使用JSON
function setStyle(obj,json){
for(var i in json)
{
obj.style[i]=json[i];
}
}

使用的时候直接:

setStyle(obj,{width : '200px'; position : 'absolute'; left : '100px';});

js中cssText批量修改元素样式的更多相关文章

  1. MathType中如何批量修改公式字体和大小

    MathType中如何批量修改公式字体和大小 关于MathType : MathType 是由美国Design Science公司开发的功能强大的数学公式编辑器,它同时支持Windows和Macint ...

  2. js中如何删除某个元素下面的所有子元素?(两种方法)

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  3. 总结:js中4类修改样式的方法

    前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...

  4. Javascript原生之用cssText批量修改样式

    一般情况下我们用js设置元素对象的样式会使用这样的形式: var element= document.getElementById(“id”);element.style.width=”20px”;e ...

  5. 用cssText批量修改样式

    一般情况下我们用js设置元素对象的样式会使用这样的形式: var element= document.getElementById(“id”);element.style.width=”20px”;e ...

  6. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  7. 详解MathType中如何批量修改公式字体和大小

    MathType应用在论文中时,有时会因为排版问题批量修改公式字体和大小,一个一个的修改不仅费时费力,还容易出现错误,本教程将详解如何在MathType公式编辑器中批量修改公式字体和大小. MathT ...

  8. cssText批量修改样式

    cssText所有浏览器都支持. cssText 的使用 obj.style.cssText = " width:200px;position:absolute;left:100px;&qu ...

  9. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

随机推荐

  1. Javascript Date构造函数和比较 (二)

    JavaScript Date对象 构造函数实例 Date构造函数中没有参数,将返回当前日期 var currentDate = new Date(); writeLine(currentDate.t ...

  2. SNPsnap | 筛选最佳匹配的SNP | 富集分析 | CP loci

    一个矛盾: GWAS得到的SNP做富集分析的话,通常都会有强的偏向性. co-localization of GWAS signals to gene-dense and high linkage d ...

  3. RSA后台签名前台验签的应用(前台采用jsrsasign库)

    写在前面 安全测试需要, 为防止后台响应数据返给前台过程中被篡改前台再拿被篡改后的数据进行接下来的操作影响正常业务, 决定采用RSA对响应数据进行签名和验签, 于是有了这篇<RSA后台签名前台验 ...

  4. Rose与PowerDesigner:两款UML建模工具的对比

    声明 本文转载自:Rose与PowerDesigner:两款UML建模工具的对比 正文 本文和大家重点讨论一下Rose与PowerDesigner:两款UML建模工具的对比,Rose和PowerDes ...

  5. IDEA的SonarLint插件报错Unable to create symbol table for

    执行sonarLint 报错: Unable to create symbol table for ***File won't be refreshed because there were erro ...

  6. java字符串格式化性能对比String.format/StringBuilder/+拼接

    String.format由于每次都有生成一个Formatter对象,因此速度会比较慢,在大数据量需要格式化处理的时候,避免使用String.format进行格式化,相反使用StringUtils.l ...

  7. 用openssl 生成证书的过程

    1. 安装 openssl 后可以执行如下命令来生成私钥和对应的证书请求文件 ca openssl req -new -keyout private.key -out for_request.csr ...

  8. Error:A problem occurred configuring project ':networklibrary'. > No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

    https://blog.csdn.net/dafeige8/article/details/87880998 https://blog.csdn.net/vocanicy/article/detai ...

  9. 支付宝小程序开发——rich-text富文本组件支持html代码

    前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法 ...

  10. 【GMT43智能液晶模块】例程二十二:USB_CDC实验——高速数据传输

    源代码下载链接: 链接:https://pan.baidu.com/s/10KOWONWbNYlonyuX0W0Mcg 提取码:ggpo 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...