用cssText批量修改样式_javascript技巧

复制代码 代码如下:

var element= document.getElementById("id");
element.style.width="20px";
element.style.height="20px";
element.style.border="solid 1px red";

样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
js中有一个cssText的方法:
语法为:obj.style.cssText="样式";
上面的代码我们可以修改成:感谢sliuqin的在留言中的斧正
element.style.cssText("width:20px;height:20px;border:solid 1px red;")
下面是是正确的

复制代码 代码如下:

element.style.cssText="width:20px;height:20px;border:solid 1px red;";

这样就可以尽量避免页面reflow,提高页面性能。

时间: 2024-10-21 20:11:22

用cssText批量修改样式_javascript技巧的相关文章

JS双击变input框批量修改内容_javascript技巧

双击空白或者文字变成input框修改内容: html代码 <td class="center" ondblclick="ShowElement(this,'intro')">{$vo.intro}</td> <td class="center" ondblclick="ShowElement(this,'address')">{$vo.address}</td> js代码 //双

js中巧用cssText属性批量操作样式_javascript技巧

给一个HTML元素设置css属性,如 复制代码 代码如下: var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了,为了简单些写个工具函数,如 复制代码 代码如下: function setStyle(obj,c

js/jquery 批量修改样式

问题描述 js/jquery 批量修改样式 <div><p id="1">aa</p></div> <div><p id="2">aa</p></div> <div><p id="32">aa</p></div> <div><p id="44">aa</p

JavaScript修改css样式style动态改变元素样式_javascript技巧

一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

photoshop批量修改文件名经验技巧

给各位photoshop软件的使用者们来详细的解析分享一下批量修改文件名的经验技巧. 教程分享: 第一步:全选文件夹需要重命名的图片   第二步:在第一张图片,右键重命名,写入要改写的名字.   输入正确名字   正确显示.   好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的批量修改文件名的经验技巧分享的全部内容了,希望小编上面的内容能给大家带去帮助.

js setattribute批量设置css样式_javascript技巧

firefox等可以使用 var dom=document.getElementById("name"); dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ; IE中则必须使用style.cssText var dom=document.getElementById("name"); dom1.style.cssText = &q

FF IE兼容性的修改小结_javascript技巧

1.html 标签如果用 $(id) 或者 getElementById 这两个方法取值时,要给该标签加上 id 的属性, IE . FF 才兼容.如 $(mobile): 如果填 写 mobile 的 input 没有 id 属性在 FF 中会报这个变量 undefined : 2. 取 form 表单的某个标签对象,如果要 IE . FF 兼容要把 formMain.item 改为 document.formName.item . 如 form1.webUrl 改为 document.for

浅谈document.write()输出样式_javascript技巧

js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容--document.write("content"),这里content就是需要输出的内容:当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量. 既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式.第一种控制方法是应用内部添加样式的方法,比如 复制代

手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)_javascript技巧

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码 代码如下: var getStyle = function( elem, type ){ return 'getComputed