How to add styles to CSS using JavaScript

Add method: 1. Use style object; 2. Use setAttribute; 3. Use setProperty; 4. Dynamically change the style of the pseudo element by changing the class of the pseudo element's parent; 5. Set cssText; 6. Create and introduce new css style files; 7. Use addRule and i

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

Use JS to dynamically set CSS styles. Common ones include the following

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

If If the attribute has a '-' sign, write it in camel case (such as textAlign). If you want to keep the - sign, write it in 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 recognized)

element.setAttribute('height', 100);

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

3. Set attributes of style

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

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

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

5. Change class For example, JQ’s change class related method

Because JS cannot obtain the pseudo element of css, you can change the parent of the pseudo element Class to dynamically change the style 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 and introduce 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

// 在原有样式操作
        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);

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to add styles to CSS using JavaScript. For more information, please follow other related articles on the PHP Chinese website!