js修改元素樣式的九種方式總結
更新時間：2024年04月29日 11:16:12 作者：冰糖雪梨dd
用慣了vue和react之后可能會慢慢淡忘掉原生的一些操作dom的幾種方式,有的時候確實需要我們通過原生的方式進行操作,下面這篇文章主要給大家介紹了關于js修改元素樣式的九種方式,需要的朋友可以參考下
1.直接設置style的屬性
style屬性可以設置或返回元素的內聯樣式,對于更改同一個元素的同一種樣式，設置style屬性的優(yōu)先級較高
- 語法：element.style.property = value
- property為CSS屬性名，如：color，margin。如果屬性名原來包含“-”，則需轉換為小駝峰形式，如：backgroundColor，marginLeft。
var box = document.querySelector('div')
box.style.color = "#fff" // 將元素中文字設置為白色
box.style.marginLeft = "100px" // 將元素左外邊距設置為100px
某些情況用這個設置 !important值無效
如果屬性有’-'號，就寫成駝峰的形式（如textAlign） 如果想保留 - 號，就中括號的形式
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 （推薦）
- 通過改變偽元素父級的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.引入css樣式文件
- 創(chuàng)建引入新的css樣式文件
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>styleElement<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> styleElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'text/css'</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">'styles_js'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> styleElement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>newStyle<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">addNewStyle</span><span class="token punctuation">(</span><span class="token string">'.box {height: 100px !important;}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 8.使用addRule、insertRule
// 在原有樣式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
<span class="token comment">// 或者插入新樣式時操作</span> <span class="token keyword">var</span> styleEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> styleSheet <span class="token operator">=</span> styleEl<span class="token punctuation">.</span>sheet<span class="token punctuation">;</span> styleSheet<span class="token punctuation">.</span><span class="token function">addRule</span><span class="token punctuation">(</span><span class="token string">'.box'</span><span class="token punctuation">,</span> <span class="token string">'height: 100px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> styleSheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">'.box {height: 100px}'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleEl<span class="token punctuation">)</span><span class="token punctuation">;</span> 9.通過classList控制樣式
- classList屬性返回一個元素類屬性集合（這里可以簡單理解為類名的集合），通過使用classList中的方法可以方便的訪問和控制元素類名，達到控制樣式的目的
classList常用方法介紹：
| 名稱 | 描述 |
|---|---|
add(class1, class2, …) | 添加一個或多個類名 |
remove(class1, class2, …) | 移除一個或多個類名 |
replace(oldClass, newClass) | 替換類名 |
contains(class) | 判定類名是否存在，返回布爾值 |
toggle(class, true|false) | 如果類名存在，則移除它，否則添加它，第二個參數代表無論類名是否存在，強制添加（true）或刪除（false） |
<div class="box">classList test</div>
<script>
var box = document.querySelector('.box')
box.classList.add('box1', 'box2') // [box] => [box, box1, box2]
box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
box.classList.replace('box', 'box2') // [box] => [box2]
box.classList.contains('box1') // 當前元素不包含類名box1，返回false
box.classList.toggle('active') // [box2] => [box2, active]
</script>總結
到此這篇關于js修改元素樣式的九種方式的文章就介紹到這了,更多相關js修改元素樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這是一個很基礎的問題，但是我們往往經常做錯，這里簡單分享下，方便需要的朋友2013-05-05
當事件mouseover中出現select下拉框時，select下拉是選不中的，下面有個不錯的解決方法，大家可以看看2014-10-10
js中 某個函數的內部函數在該函數執(zhí)行結束后仍然可以訪問這個函數中定義的變量，這稱為閉包(Closure)2008-11-11
這篇文章主要為大家介紹了移動端touch拖動和click事件沖突問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
很神奇！js+CSS+DIV實現文字顏色漸變效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要為大家整理了10個JavaScript代碼使用技巧,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
本文主要介紹了webpack打包時如何修改文件名的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
能通過Array.prototype.slice轉換為真正的數組的帶有l(wèi)ength屬性的對象。2010-10-10
ionic App問題總結系列之ionic點擊系統返回鍵退出App
本篇文章主要介紹了ionic App問題總結系列之ionic點擊系統返回鍵退出App，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細介紹了JavaScript仿網易選項卡制作代碼，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10