JavaScript給CSS加樣式的方法

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

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了微山免費建站歡迎大家使用！

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

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

用JS來動態(tài)設置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，推薦用這種方法設置第三個參數(shù)

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

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

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

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

6. 設置cssText

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

7. 創(chuàng)建引入新的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加樣式的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

文章標題：JavaScript給CSS加樣式的方法
網(wǎng)站URL：http://muchs.cn/article44/pppcee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、品牌網(wǎng)站建設、服務器托管、網(wǎng)站建設、、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)