原生js怎么設置css

發布時間：2021-04-21 11:38:01 來源：億速云閱讀：236 作者：小新欄目：web開發

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

js的作用是什么

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

方法：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';   // 追加行內樣式

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

向AI問一下細節