JS批量操作CSS属性详细解析
2013-12-16 00:00
369 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .day { background-color:White; } .night { background-color:Black } </style> <script language="javascript" type="text/javascript"> function operStyle() { var divObj = document.getElementById("divContent"); var btnObj = document.getElementById("btnCommit"); if (divObj.className == "day") { divObj.className = "night"; btnObj.value = "开灯"; } else { divObj.className = "day"; btnObj.value = "关灯"; } } //批量修改div的样式属性,由多种样式构成 //方法1: function methodOne() { var divObj = document.getElementById("divTest"); divObj.style.backgroundColor = "blue"; divObj.style.border = "solid 1px red"; divObj.style.width = "300px"; divObj.style.height = "200px"; divObj.style.backgroundPosition = "center"; } //方法2: function methodTwo() { var divObj = document.getElementById("divTest"); divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center"; } </script> </head> <body> <form id="form1" runat="server"> <div id="divContent" class="day"> <font color="red">我是一个div啊,咿呀咿呀呦!</font> </div> <input type="button" value="关灯" id="btnCommit" onclick="operStyle();" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <hr /> <h1>修改divTest的样式,多属性操作</h1> <div id="divTest" > <font color="red">修改divTest的样式</font> </div> <input type="button" value="修改divTest的样式" onclick="methodTwo()" /> </form> </body> </html>
我们用js书写css样式通常会用下面的两种方式:
一般情况下我们用js设置元素对象的样式会使用这样的形式:
复制代码 代码如下:
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(”样式”);
上面的代码我们可以修改成:
复制代码 代码如下:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
这种写法可以尽量避免页面的多次reflow,提高页面性能。
相关文章推荐
- js中巧用cssText属性批量操作样式
- js中巧用cssText属性批量操作样式(转)
- JS批量操作CSS属性详细解析
- js中巧用cssText属性批量操作样式
- 巧用cssText属性批量操作样式
- js鼠标及对象坐标控制属性详细解析
- js鼠标及对象坐标控制属性详细解析
- 巧用cssText属性批量操作样式
- 如何使用js操作css属性
- JS 巧用cssText属性 操作样式
- js操作css属性实现div层展开关闭效果的方法
- JS操作css的float属性的特殊写法
- 巧用cssText属性批量操作样式
- HTML5的自定义属性data-*详细介绍和JS操作实例
- 巧用cssText属性批量操作样式
- 从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法
- js操作css的属性名规律
- JS 操作Array数组的方法及属性实例解析
- 使用js操作css属性的写法