您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JS批量操作CSS属性详细解析
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了JS批量操作CSS属性。需要的朋友可以过来参考下，希望对大家有所帮助
代码如下: <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冒泡事件的快速解决方法
- 下一个程序编程： js鼠标及对象坐标控制属性详细解析
