This article mainly introduces the JS batch operation CSS Properties. Need friends can come to the reference, I hope to help you.
Code as follows: <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 () { &N Bsp var divobj = document.getElementById ("divcontent"); var btnobj = document.getElementById ("Btncommit"); if (Divobj.classname = "Day") { &NBSP ; Divobj.classname = "Night"; Btnobj.value = "Turn on the Light"; } else { Divobj.classname = "Day"; &nb Sp Btnobj.value = "Turn off the Lights"; { } //Bulk modification div style properties, by a variety of styles Composition //Method 1: function MethodOne () { &NBSP ; 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"; } //Method 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" R unat= "Server" > <div id= "divcontent" class= "Day" > <font color= "Red" & gt; I am a div ah, babbling! </font> </div> <input type= "button" value= "Turn off Lights" id= "Btncommit" onclick= " Operstyle (); "/> <br/> <br/> <br/> <BR /> <br/> <br/> <br/> <hr/> & nbsp <h1> Modify Divtest style, multi-attribute operation </h1> <div id= "diVtest "> <font color=" Red "> Modify Divtest style </font> </div> &nbs P <input type= "button" value= "Modify Divtest Style" onclick= "methodtwo ()"/> </form> </body > </html> We write CSS styles in JS usually in the following two ways: in general, we use JS to set the style of the element object using this form: code as follows: Var element= document.getElementById ("id"); element.style.width= "20px"; element.style.height= "20px"; element.style.border= "Solid 1px red"; But the above method has a disadvantage, the style is a lot of code, and through JS to overwrite the style of the object is a more typical destruction of the original style and reconstruction process, This destruction and rebuilding will add to the overhead of the browser. JS has a csstext method: syntax: Obj.style.cssText ("style"); the above code we can modify to: code as follows: element.style.csstext= "Width:20px;height:20px;border:solid 1px red;"; This kind of writing can avoid the multiple reflow of the page and improve the performance of the page. Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
