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

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. Db2 Terminate Vs Connect Reset , Disconnect

    db2 Terminate and db2 connect Reset both break the connection to a database.                Connect ...

  2. CentOS 7.5 安装Oracle 11gR2 86%报错:Error in invoking target 'agent nmhs' of makefile

    解决方案: 不要关闭安装过程,另外打开终端窗口,将ins_emagent.mk文件中的 (MK_EMAGENT_NMECTL)更改为$(MK_EMAGENT_NMECTL) -lnnz11,然后在安装 ...

  3. css 设置div半透明 悬浮在页面底部 不随滚动条滚动

    .action-button { width: 100%; background:rgba(0,0,0,0.7); position:fixed; bottom:; left:; z-index:; ...

  4. win 程序开机自启动设置

    若程序设置了开机自启动,但是仍没有效果,可能是被什么拦截了,或者什么原因.导致开机并没有自启动,那么如何解决呢? 解决方法:将软件的快捷方式 或 单个软件 直接拷贝到 如下目录,即可强制实现开机自启动 ...

  5. Django框架入门1虚拟开发环境的配置

    1.安装virtualenv虚拟程序 C:\Users\ws>pip install virtualenv 创建名字为testvir的虚拟环境 C:\Users\ws>virtualenv ...

  6. 创建Observer

    观察者 观察者作用就是监听事件, 然后对这个事件做出响应, 或者说任何响应时间的行为都是观察者 1. 在subscribe()方法中创建监听者 创建观察者最直接的方法就是在Observable的sub ...

  7. Spring MVC -- Spring Tool Suite和Maven(安装Tomcat、JDK)

    Spring提供了自己的集成开发环境(IDE),称为Spring Tool Suite(STS),它可能是构建Spring应用程序的最佳IDE了.STS捆绑了Maven作为其默认依赖管理工具,因此不需 ...

  8. 阿里开源 OpenJDK 发行版 Dragonwell

    日有消息显示,阿里将于 21 日重磅发布其 OpenJDK 发行版 Alibaba Dragonwell. 我们知道 OpenJDK 是基于 GPL v2/Classpath Exception 的 ...

  9. VS2015 调试中断点失效或表达式错误的解决办法

    题描述:在调试前加了断点,但debug时红色的断点变成透明的圆圈加一个感叹号,执行到该处时也不会停止. 这个问题遇到过几次了,前几次都没怎么注意,有时候是因为复制粘贴了某段代码后就这样了,然后点击撤销 ...

  10. LODOP打印URL显示和隐藏进度条

    不建议使用ADD_PRINT_URL:由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的内 ...