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

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. Siam R-CNN: Visual Tracking by Re-Detection

    Siam R-CNN: Visual Tracking by Re-Detection 2019-12-02 22:21:48 Paper:https://128.84.21.199/abs/1911 ...

  2. JAXB xml序列化应注意

    使用JAXB将对象序列化为XML时,发现有一个地方性能非常低,即 JAXBContext.newInstance(XXX.class); 建议将其提前创建好并作为变量保存,到时可直接使用其引用,而非重 ...

  3. 解决git 出现 Your account has been blocked问题

    使用git 出现 Your account has been blocked 无法从远程pull代码下来, 解决方案如下: $ git push origin masterGitLab: Your a ...

  4. quartus仿真提示: Can't launch the ModelSim-Altera software

    quartus仿真提示: Can't launch the ModelSim-Altera software 2017年07月13日 17:54:50 小怪_tan 阅读数:3255   路径中的结尾 ...

  5. 使用NPOI或EPPlus来导出Excel文件实例,可在Excel文件加密

    使用NPOI.dll组件来导出Excel文件,并设置样式,Nuget引用即可. packages\NPOI.2.1.3.1\lib\net20\NPOI.dll #region Excel prote ...

  6. Win10如何开启蓝屏记录?Win10开启蓝屏信息记录的方法

    转载:http://www.xitongzhijia.net/xtjc/20170127/91010.html 蓝屏,是电脑最常见的故障,一般出现蓝屏时都会显示详细的蓝屏错误信息,方便用户排查故障.最 ...

  7. 【Spring Cloud学习之五】配置中心

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 Spring Cloud 1.2 一.什么是配置中心在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实 ...

  8. Vue+abp树形表格

    项目中需要用到树形表格,其他同学找了一个ZkTable,我也就跟着用了,不太好用,有更好的记得联系我.先说下缺点,如果这些不能满足你,后面也没必要看了. 缺点如下(也可能我不会用,如果你会一定记得告诉 ...

  9. 有关dfs、bfs解决迷宫问题的个人见解

    可以使用BFS或者DFS方法解决的迷宫问题! 题目如下: kotori在一个n*m迷宫里,迷宫的最外层被岩浆淹没,无法涉足,迷宫内有k个出口.kotori只能上下左右四个方向移动.她想知道有多少出口是 ...

  10. 【转帖】Flink 核心技术浅析(整理版)

    Flink 核心技术浅析(整理版) https://www.cnblogs.com/swordfall/p/10612404.html 分类: Flink undefined 1. Flink简介 A ...