How to add styles to CSS using JavaScript-JS Tutorial-php.cn

How to add styles to CSS using JavaScript

醉折花枝作酒筹

Release： 2023-01-07 11:45:05

Original

6746 people have browsed it

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

How to add styles to CSS using JavaScript

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 = &#39;100px&#39;;

Copy after login

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

element.setAttribute(&#39;height&#39;, 100);

Copy after login

element.setAttribute(&#39;height&#39;, &#39;100px&#39;);

Copy after login

3. Set attributes of style

element.setAttribute(&#39;style&#39;, &#39;height: 100px !important&#39;);

Copy after login

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

element.style.setProperty(&#39;height&#39;, &#39;300px&#39;, &#39;important&#39;);

Copy after login

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 = &#39;blue&#39;;
element.className += &#39;blue fb&#39;;

Copy after login

6. Set cssText

element.style.cssText = &#39;height: 100px !important&#39;;
element.style.cssText += &#39;height: 100px !important&#39;;

Copy after login

7. Create and introduce a new css style file

function addNewStyle(newStyle) {
            var styleElement = document.getElementById(&#39;styles_js&#39;);

            if (!styleElement) {
                styleElement = document.createElement(&#39;style&#39;);
                styleElement.type = &#39;text/css&#39;;
                styleElement.id = &#39;styles_js&#39;;
                document.getElementsByTagName(&#39;head&#39;)[0].appendChild(styleElement);
            }
            
            styleElement.appendChild(document.createTextNode(newStyle));
        }

        addNewStyle(&#39;.box {height: 100px !important;}&#39;);

Copy after login

8. Use addRule, insertRule

// 在原有样式操作
        document.styleSheets[0].addRule(&#39;.box&#39;, &#39;height: 100px&#39;);
        document.styleSheets[0].insertRule(&#39;.box {height: 100px}&#39;, 0);

        // 或者插入新样式时操作
        var styleEl = document.createElement(&#39;style&#39;),
            styleSheet = styleEl.sheet;

        styleSheet.addRule(&#39;.box&#39;, &#39;height: 100px&#39;);
        styleSheet.insertRule(&#39;.box {height: 100px}&#39;, 0);

        document.head.appendChild(styleEl);

Copy after login

[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!