Summary of common methods for dynamically setting CSS styles using JS

Use JS to dynamically set CSS styles. Common ones are as follows

1. Directly set the style attribute. In some cases, use this setting! important value is invalid

If the attribute has a '-' sign, write it in camel case ( Such as textAlign) If you want to keep the - sign, use the form of square brackets element.style['text-align'] = '100px';

element.style.height = '100px';

2. Set attributes directly (can only be used for certain attributes, Related styles will be automatically identified)

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

3. Set the attributes 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', '300px', 'important');

5. Change class, such as JQ’s method of changing class

Because JS cannot obtain the pseudo element of css, you can dynamically change the style of the pseudo element by changing the class of the parent of the pseudo element

element.className = 'blue';
element.className += 'blue fb';

6. Set cssText

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

7. Create and introduce 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

// 在原有样式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
// 或者插入新样式时操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet;
styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0);
document.head.appendChild(styleEl);