JavaScript給CSS加樣式的方法

本篇內容介紹了“JavaScript給CSS加樣式的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

添加方法：1、使用style對象；2、使用setAttribute；3、使用setProperty；4、通過改變偽元素父級的class來動態更改偽元素的樣式；5、設置cssText；6、創建引入新的css樣式文件；7、使用addRule和i

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

用JS來動態設置CSS樣式，常見的有以下幾種

1. 直接設置style的屬性  某些情況用這個設置 !important值無效

如果屬性有'-'號，就寫成駝峰的形式（如textAlign）  如果想保留 - 號，就中括號的形式  element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接設置屬性（只能用于某些屬性，相關樣式會自動識別）

element.setAttribute('height', 100);

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

3. 設置style的屬性

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

4. 使用setProperty  如果要設置!important，推薦用這種方法設置第三個參數

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

5. 改變class   比如JQ的更改class相關方法

因JS獲取不到css的偽元素，所以可以通過改變偽元素父級的class來動態更改偽元素的樣式

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

6. 設置cssText

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

7. 創建引入新的css樣式文件

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. 使用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);

“JavaScript給CSS加樣式的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！