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

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. 【用例篇】Xmind转为csv 导入禅道

    用过禅道的都知道,用例维护实在是太不方便了,有人推荐了一种方法,用Xmind先编写用例(思路比较清晰),写好之后借助工具(xmind2testcase)将用例转为CSV格式,之后再导入禅道 参考资料: ...

  2. django注释

    转自https://www.cnblogs.com/dayouzi/p/10154815.html Django在HTML里面书写的模板语言不能使用这种方法注释,这样注释实际依然有效 <!--{ ...

  3. Mysql 执行效率 性能综合贴

    一.or 的性能不如 in [参考]mysql in与or效率比较 二.MySQL数据库开发的三十六条军规 [参考]https://blog.csdn.net/aa_moon/article/deta ...

  4. Redux counterpart rematch dva

    rematch https://github.com/rematch/rematch#examples 数据模型一个文件定义, 不用分散到 action actiontype reducer 文件 e ...

  5. Ant Design Pro Vue 时间段查询 问题

    <a-form-item label="起止日期" :labelCol="{lg: {span: 7}, sm: {span: 7}}" :wrapper ...

  6. coding git push 403 时

    直接修改 项目目录下的 .git/config   url url = https://coding用户名:coding密码@git.coding.net/coding账号/coding项目名称.gi ...

  7. webpack四个基础概念

    本文参考自:https://www.cnblogs.com/xiaohuochai/p/7002344.html webpack 核心概念:入口(entry).输出(output).加载器(loade ...

  8. java jdbc使用SSH隧道连接mysql数据库demo

    java jdbc使用SSH隧道连接mysql数据库demo   本文链接:https://blog.csdn.net/earbao/article/details/50216999   packag ...

  9. SQL2014做数据库主从镜像备份(也可以用于高可用)备忘(非域控)。

    部份内容参考原始文章链接:https://www.cnblogs.com/stragon/p/5643754.html ,同时比较有参考价值的文章:https://blog.csdn.net/sqls ...

  10. Dubbo2.7.3入门

    2.7.X的Dubbo,包名不再是com.alibaba,而是org.apache 先看工程目录结构 一个公共api模块,一个SpringBoot项目充当Dubbo服务,一个SpringBoot项目充 ...