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

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. Leetcode 222:完全二叉树的节点个数

    题目 给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干位置. ...

  2. JVM探究之 —— 类文件结构(脑图)

  3. OpenCV3与深度学习实例:Dlib+VGG Face实现两张脸部图像相似度比较

    原文:https://my.oschina.net/wujux/blog/2221444 实现思路: 1.使用Dlib识别并提取脸部图像 2.使用VGG Face模型提取脸部特征 3.使用余弦相似度算 ...

  4. 014 Mui

    一:概述 1.说明 是开发出来的一套好用的代码片段 任何项目都可以使用MUI 官网:https://dev.dcloud.net.cn/mui/ 不能使用npm进行下载,需要手动从git上下载 2.下 ...

  5. 如何将业务代码写得像诗一样(使用注解+单例+工厂去掉一大波if和else判断)

    1.订单控制器,提供一个根据商品id和银行渠道id计算商品折后价格的接口: import org.springframework.web.bind.annotation.GetMapping; imp ...

  6. Django入门2开发工具pycharm的配置

    在pycharm中新建django项目 查看django是否安装成功 运行django 设置pycharm快捷键 设置python模板,新建的python文件就会自动生成一些信息 设置django启动 ...

  7. cisco路由器telnet及设置用户名和密码的几种方式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sxajw/article/details ...

  8. nginx 分离配置文件 conf.d和default.conf

    1. 在 nginx.conf 文件中引用 conf.d 下的所有配置文件 #在http配置节的末尾添加配置引用 http { ... #gzip on; include /etc/nginx/con ...

  9. maven基础依赖外部lib包(依赖钉钉sdk为例)

    jar包放置位置 pom.xml指定依赖 1 <dependencies> 2 <!--钉钉工具包,如缺失请到钉钉服务器开发文档下载--> 3 <dependency&g ...

  10. 浏览器查看和手动设置cookie的值

    1.查看:按F12进入浏览器的开发者模式——console——在命令行输入javascript:alert(document.cookie),再回车 2.按F12进入浏览器的开发者模式——consol ...