使用JavaScript動態(tài)設(shè)置CSS樣式的三種常用方式
一、理論基礎(chǔ)
1.1 三種主要的方式
在 JavaScript 中，有三種主要的方式可以動態(tài)設(shè)置 CSS 樣式：
- 直接操作元素的 style 屬性：這是最直接的方式，通過 JavaScript 直接修改元素的內(nèi)聯(lián)樣式。
- 修改元素的 classList 屬性：通過添加、移除或切換元素的 CSS 類來改變樣式。
- 修改 <style> 標(biāo)簽的內(nèi)容：通過 JavaScript 動態(tài)修改 <style> 標(biāo)簽中的 CSS 規(guī)則。
1.2 優(yōu)先級說明
不同的樣式設(shè)置方式有不同的優(yōu)先級，內(nèi)聯(lián)樣式（通過 style 屬性設(shè)置）的優(yōu)先級最高，其次是 <style> 標(biāo)簽中的樣式，最后是外部 CSS 文件中的樣式。
二、具體實現(xiàn)方法及示例
2.1 直接使用元素的 setAttribute() 方法操作元素的 style 屬性
原理
在 JavaScript 里，setAttribute() 是 DOM 元素對象的一個方法，可用于為指定的 HTML 元素設(shè)置屬性值。它的基本語法如下：
element.setAttribute(name,value)
示例代碼
使用setAttribute()方法
<body>
<div id="myBox" class="myBox">
<script>
// 獲取div元素
const boxs = document.getElementById('myBox');
// 直接設(shè)置 boxs 的 style 屬性
boxs.setAttribute('style', 'width: 200px; height: 200px; background-color: red;');
</script>
</body>
優(yōu)缺點
在網(wǎng)頁開發(fā)中，使用 setAttribute() 方法設(shè)置元素 style 屬性有其獨特的優(yōu)勢和不足之處，以下是詳細(xì)分析：
優(yōu)點
- 減少 DOM 操作次數(shù)以提高性能：通過
setAttribute()方法將屬性的值直接設(shè)置到元素的屬性中，而非通過 JavaScript 對象來操作，能夠減少 DOM 操作的次數(shù)，進(jìn)而提高網(wǎng)頁性能。因為頻繁的 DOM 操作會導(dǎo)致瀏覽器進(jìn)行重排和重繪，影響頁面的響應(yīng)速度和性能。 - 提高代碼的可讀性和可維護(hù)性：當(dāng)需要設(shè)置多個樣式屬性時，使用
setAttribute()方法可以將所有樣式集中在一個字符串中，使代碼更加簡潔和易于理解，也便于后續(xù)的修改和管理。相比于多次使用element.style.property = value的方式，代碼結(jié)構(gòu)更加清晰。
- 減少 DOM 操作次數(shù)以提高性能：通過
缺點
樣式優(yōu)先級問題：使用
setAttribute()設(shè)置的內(nèi)聯(lián)樣式具有較高的優(yōu)先級，可能會覆蓋外部樣式表或內(nèi)部樣式表中的樣式。這可能導(dǎo)致樣式的控制變得復(fù)雜，難以預(yù)測最終的顯示效果。例如，如果外部樣式表中定義了某個元素的基本樣式，而使用setAttribute()設(shè)置了相同的樣式屬性，那么內(nèi)聯(lián)樣式將優(yōu)先顯示，可能破壞整體的樣式設(shè)計。缺乏動態(tài)性和靈活性：使用
setAttribute()方法設(shè)置的樣式是靜態(tài)的，一旦設(shè)置就很難根據(jù)不同的條件動態(tài)地修改樣式。而使用element.style可以更方便地在 JavaScript 中動態(tài)修改單個樣式屬性。例如，如果需要根據(jù)用戶的交互動態(tài)改變元素的寬度，使用element.style.width可以直接修改，而使用setAttribute()則需要重新設(shè)置整個style屬性字符串，操作相對繁瑣。
代碼可維護(hù)性在某些情況下降低：雖然
setAttribute()可以使代碼在一定程度上更加簡潔，但當(dāng)樣式字符串過長或包含復(fù)雜的樣式規(guī)則時，代碼的可讀性和可維護(hù)性會降低。例如，當(dāng)樣式字符串中包含大量的 CSS 屬性和值時，很難快速定位和修改特定的樣式屬性。
2.2 直接使用 DOM節(jié)點.style.樣式名 = 樣式值的方式，這種方式可稱為“直接設(shè)置內(nèi)聯(lián)樣式”
原理
在 JavaScript 里，document.getElementById() 會獲取具有特定 id（）的元素。而獲取到的元素對象具備 style 屬性，該屬性能夠讓我們直接操作元素的內(nèi)聯(lián)樣式。通過給 style 屬性的具體樣式屬性（像 width、height、backgroundColor 等）賦值，就可以動態(tài)地修改元素的外觀。
示例代碼
<body>
<div id="myBox" class="myBox">
<script>
// 獲取div元素
const boxs = document.getElementById('myBox');
// 直接設(shè)置 boxs 的 style 屬性
boxs.style.width = '200px';
boxs.style.height = '200px';
boxs.style.backgroundColor = 'blue';
</script>
</body>
優(yōu)缺點分析
- 優(yōu)點
- 簡單直接：可以迅速對元素的樣式進(jìn)行修改，不用去修改 CSS 文件或者操作類名，代碼編寫容易理解。
- 即時生效：設(shè)置之后元素的樣式會馬上改變，能夠?qū)崿F(xiàn)實時的交互效果。
- 缺點
- 無法設(shè)置 !important：當(dāng)使用這種方式設(shè)置樣式時，無法添加 !important 聲明，要是遇到有 !important 的樣式規(guī)則，此設(shè)置可能會失效。
- 可維護(hù)性差：如果有大量的樣式需要設(shè)置，會讓 JavaScript 代碼變得冗長，并且不利于樣式的統(tǒng)一管理和維護(hù)。
2.3 修改元素的 classList 屬性
原理
classList 屬性是一個 DOMTokenList 對象，它提供了一系列方法來操作元素的 CSS 類，如 add、remove、toggle 等。DOMTokenList 是一個類數(shù)組對象，代表了元素的 class 屬性中的一組標(biāo)記（即類名），這些方法可以讓我們方便地動態(tài)修改元素的類名，從而改變元素的樣式。
常用方法及示例代碼
1. add() 方法
作用：用于向元素的 classList 中添加一個或多個類名。如果類名已經(jīng)存在，則不會重復(fù)添加。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態(tài)設(shè)置樣式 - classList 屬性</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<button id="highlightButton">高亮顯示</button>
<p id="myText">這是一段文本，點擊按鈕可以高亮顯示它。</p>
<script>
const button = document.getElementById('highlightButton');
const text = document.getElementById('myText');
button.addEventListener('click', function () {
// 添加 highlight 類
text.classList.add('highlight');
});
</script>
</body>
</html>
上述代碼中，通過 add 方法為 id 為 myText 的元素添加了 highlight 類，元素的背景顏色會變?yōu)辄S色，字體會變粗。
代碼解釋
- 在 CSS 中定義了一個名為
highlight的類，該類包含了背景顏色和字體加粗的樣式。 - 通過
document.getElementById方法獲取按鈕和文本元素。 - 給按鈕添加一個點擊事件監(jiān)聽器。
- 當(dāng)按鈕被點擊時，使用
text.classList.add('highlight')方法給文本元素添加highlight類，從而改變其樣式。
2. remove() 方法
作用：用于從元素的 classList 中移除一個或多個類名。如果類名不存在，不會報錯。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">這是一個測試 div。</div>
<script>
const myDiv = document.getElementById('myDiv');
myDiv.classList.remove('highlight');
</script>
</body>
</html>
上述代碼中，remove 方法將 myDiv 元素的 highlight 類移除，元素的背景顏色恢復(fù)默認(rèn)。
3. toggle() 方法
作用：用于在元素的 classList 中切換類名。如果類名存在，則移除它；如果類名不存在，則添加它。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">這是一個測試 div。</div>
<button onclick="toggleClass()">切換類名</button>
<script>
function toggleClass() {
const myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('highlight');
}
</script>
</body>
</html>
上述代碼中，擊按鈕時，toggle 方法會在 myDiv 元素的 classList 中切換 highlight 類的存在狀態(tài)，從而改變元素的背景顏色。
4. contains() 方法
作用：用于檢查元素的 classList 中是否包含指定的類名。返回一個布爾值。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">這是一個測試 div。</div>
<script>
const myDiv = document.getElementById('myDiv');
const hasHighlight = myDiv.classList.contains('highlight');
console.log(hasHighlight); // 輸出: true
</script>
</body>
</html>
上述代碼中，contains 方法檢查 myDiv 元素是否包含 highlight 類，并將結(jié)果存儲在 hasHighlight 變量中。
使用 classList 屬性的優(yōu)勢
- 代碼簡潔：使用 classList 提供的方法可以用較少的代碼實現(xiàn)類名的操作，避免了手動拼接和解析 class 屬性字符串的繁瑣。
- 提高可讀性：方法名直觀地表達(dá)了操作的意圖，使代碼更易于理解和維護(hù)。
- 避免錯誤：classList 方法會自動處理類名的添加、移除和切換，避免了手動操作可能導(dǎo)致的語法錯誤和意外結(jié)果。
2.4 修改 <style> 標(biāo)簽的內(nèi)容
原理
可以通過 JavaScript 動態(tài)創(chuàng)建或修改 <style> 標(biāo)簽中的 CSS 規(guī)則，從而改變頁面中元素的樣式。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態(tài)設(shè)置樣式 - 修改 style 標(biāo)簽內(nèi)容</title>
</head>
<body>
<button id="changeStyleButton">改變樣式</button>
<div id="myDiv">這是一個 div 元素，點擊按鈕可以改變它的樣式。</div>
<script>
const button = document.getElementById('changeStyleButton');
const div = document.getElementById('myDiv');
button.addEventListener('click', function () {
// 創(chuàng)建一個新的 style 元素
const style = document.createElement('style');
// 設(shè)置 style 元素的內(nèi)容
style.innerHTML = `
#myDiv {
border: 2px solid blue;
padding: 10px;
}
`;
// 將 style 元素添加到 head 中
document.head.appendChild(style);
});
</script>
</body>
</html>
代碼解釋
- 通過
document.getElementById方法獲取按鈕和 div 元素。 - 給按鈕添加一個點擊事件監(jiān)聽器。
- 當(dāng)按鈕被點擊時，創(chuàng)建一個新的
<style>元素，并設(shè)置其內(nèi)容為新的 CSS 規(guī)則。 - 最后，將
<style>元素添加到<head>標(biāo)簽中，從而改變 div 元素的樣式。
四、總結(jié)
通過以上三種方式，我們可以在 JavaScript 中動態(tài)設(shè)置 CSS 樣式。直接操作 style 屬性適合臨時、簡單的樣式修改；修改 classList 屬性適合根據(jù)不同狀態(tài)切換預(yù)定義的樣式；修改 <style> 標(biāo)簽內(nèi)容適合動態(tài)創(chuàng)建全局的 CSS 規(guī)則。在實際開發(fā)中，可以根據(jù)具體需求選擇合適的方式.
以上就是使用JavaScript動態(tài)設(shè)置CSS樣式的三種常用方式的詳細(xì)內(nèi)容，更多關(guān)于JS動態(tài)設(shè)置CSS樣式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
xmlplus組件設(shè)計系列之路由（ViewStack)（7）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設(shè)計系列之路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章是JavaScript插件化開發(fā)系列教程的第五篇，還是著重于實戰(zhàn)，通過具體的實例來學(xué)習(xí)jQuery的方式如何開發(fā)插件，有相同需求的小伙伴來參考下吧。2015-02-02
大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果，Dreamweaver會自動為用戶生成特定的程序代碼，大家有沒有想過動畫的實現(xiàn)原理呢？2013-07-07
這篇文章主要介紹了vant倒序年月日期組件封裝實例詳解,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
JavaScript 異步調(diào)用框架 (Part 6 - 實例 & 模式)
我們用了5篇文章來討論如何編寫一個JavaScript異步調(diào)用框架（問題 & 場景、用例設(shè)計、代碼實現(xiàn)、鏈?zhǔn)秸{(diào)用、鏈?zhǔn)綄崿F(xiàn)），現(xiàn)在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。2009-08-08
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本文給大家介紹了js控制臺的使用，非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友參考下吧2018-07-07
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉標(biāo)簽頁，非常實用，感興趣的童鞋參考下吧2016-04-04
這篇文章主要介紹了js數(shù)組去重的11種方法，對js數(shù)組感興趣的同學(xué)，可以把這11種方法實驗一下2021-04-04
Easyui form combobox省市區(qū)三級聯(lián)動
這篇文章主要介紹了Easyui form combobox省市區(qū)三級聯(lián)動 的相關(guān)資料,需要的朋友可以參考下2016-01-01