How javascript modifies css Styles

This article is about how javascript modifies the css style. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Modification method: 1, use "element .style. Attribute name =" value "; 2, use" element .setAttribute ('attribute name', 'value') "; 3, use" element .setAttribute ('style',' attribute name: value') "; 4, use" element .className = 'value' ".

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

1. Directly set the properties of style. In some cases, this setting is used! invalid important value

If the attribute has a'- 'sign, write it in the form of a hump (such as textAlign). If you want to keep the-sign, use the bracketed form element.style [' text-align'] = '100px'.

Element.style.height = '100px'

2. Set properties directly (can only be used for certain attributes, and related styles will be automatically recognized)

Element.setAttribute ('height', 100); element.setAttribute (' height', '100px')

3. Set the properties of style

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

4. Use setProperty if you want to set! important, it is recommended to use this method to set the third parameter

Element.style.setProperty ('height',' 300pxrooms, 'important')

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

Since JS cannot get pseudo elements of css, the style of pseudo elements can be changed dynamically by changing the class of the parent of pseudo elements.

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 addRule, insertRule

/ / operate document.styleSheets [0] .addRule ('.box', 'height: 100px') in the original style; document.styleSheets [0] .insertRule (' .box {height: 100px}', 0); / / or var styleEl = document.createElement ('style'), styleSheet = styleEl.sheet; styleSheet.addRule (' .box', 'height: 100px') when inserting a new style StyleSheet.insertRule ('.box {height: 100px}', 0); document.head.appendChild (styleEl); Thank you for reading! This is the end of this article on "how to modify the css style of javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!