原生js如何設定css

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

本教學操作環境：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. 使用setProperty  如果要設定!important，建議用此方法設定第三個參數

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

4.  設定cssText

element.style.cssText = 'height: 100px !important';   // 覆盖其他行内样式
element.style.cssText += 'height: 100px !important';   // 追加行内样式

【建議學習：javascript進階教學】

以上是原生js如何設定css的詳細內容。更多資訊請關注PHP中文網其他相關文章！