原生js怎么設(shè)置css

這篇文章主要介紹了原生js怎么設(shè)置css，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

方法：1、使用style“style.屬性=值”語句設(shè)置；2、使用“setAttribute(屬性,值)”語句設(shè)置；3、使用“setProperty(屬性,值)”語句設(shè)置；4、使用“style.cssText='屬性:值'”語句設(shè)置。

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

用JS來動態(tài)設(shè)置CSS樣式(設(shè)置成行內(nèi)樣式)，常見的有以下幾種

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

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

element.style.height = '100px';

2. 直接設(shè)置屬性（只能用于某些屬性，相關(guān)樣式會自動識別）

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

3. 使用setProperty  如果要設(shè)置!important，推薦用這種方法設(shè)置第三個參數(shù)

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

4. 設(shè)置cssText

element.style.cssText = 'height: 100px !important';   // 覆蓋其他行內(nèi)樣式
element.style.cssText += 'height: 100px !important';   // 追加行內(nèi)樣式

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“原生js怎么設(shè)置css”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!