The common method of setting CSS style with JS dynamic summary (recommended) _javascript tips

Use JS to dynamically set CSS styles, common in the following several

1. Set the properties of the style directly some cases with this setting!important value is invalid

If the attribute has a '-' number, it is written in the form of a hump (e.g. textalign) if you want to retain the-number, in the form of brackets element.style[' text-align ' = ' 100px ';

Element.style.height = ' 100px ';

2. Set properties directly (only for certain properties, the related styles will be recognized automatically)

Element.setattribute (' height ', m);
Element.setattribute (' height ', ' 100px ');

3. Set the properties of the style

Element.setattribute (' style ', ' height:100px!important ');

4. Use SetProperty if you want to set up!important, it is recommended that you set the third parameter in this way

Element.style.setProperty (' height ', ' 300px ', ' important ');

5. Change class, such as JQ change class related methods

Because JS gets no CSS artifacts, you can dynamically change the pseudo element's style by changing the class of the pseudo element's parent

Element.classname = ' Blue ';
Element.classname + = ' Blue fb ';

6. Set Csstext

Element.style.cssText = ' height:100px!important ';
Element.style.cssText = ' height:100px!important ';

7. Create a new CSS style file

function Addnewstyle (newstyle) {
var styleelement = document.getElementById (' Styles_js ');
if (!styleelement) {
styleelement = document.createelement (' style ');
Styleelement.type = ' text/css ';
styleelement.id = ' Styles_js ';
document.getElementsByTagName (' head ') [0].appendchild (StyleElement);
}
Styleelement.appendchild (document.createTextNode (NewStyle));
}
Addnewstyle ('. box {height:100px!important;} ');

8. Use of Addrule, Insertrule

Operates in the original style
document.stylesheets[0].addrule ('. Box ', ' height:100px ');
Document.stylesheets[0].insertrule ('. box {height:100px} ', 0);
Or when you insert a new style
, manipulate var styleel = document.createelement (' style '),
styleSheet = Styleel.sheet;
Stylesheet.addrule ('. Box ', ' height:100px ');
Stylesheet.insertrule ('. box {height:100px} ', 0);

The above is a small set of JS to introduce the dynamic setting of CSS style common method Summary, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!