使用JavaScript動(dòng)態(tài)設(shè)置CSS樣式的三種常用方式
一、理論基礎(chǔ)
1.1 三種主要的方式
在 JavaScript 中，有三種主要的方式可以動(dòng)態(tài)設(shè)置 CSS 樣式：
- 直接操作元素的 style 屬性：這是最直接的方式，通過 JavaScript 直接修改元素的內(nèi)聯(lián)樣式。
- 修改元素的 classList 屬性：通過添加、移除或切換元素的 CSS 類來改變樣式。
- 修改 <style> 標(biāo)簽的內(nèi)容：通過 JavaScript 動(dòng)態(tài)修改 <style> 標(biāo)簽中的 CSS 規(guī)則。
1.2 優(yōu)先級(jí)說明
不同的樣式設(shè)置方式有不同的優(yōu)先級(jí)，內(nèi)聯(lián)樣式（通過 style 屬性設(shè)置）的優(yōu)先級(jí)最高，其次是 <style> 標(biāo)簽中的樣式，最后是外部 CSS 文件中的樣式。
二、具體實(shí)現(xiàn)方法及示例
2.1 直接使用元素的 setAttribute() 方法操作元素的 style 屬性
原理
在 JavaScript 里，setAttribute() 是 DOM 元素對(duì)象的一個(gè)方法，可用于為指定的 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)缺點(diǎn)
在網(wǎng)頁開發(fā)中，使用 setAttribute() 方法設(shè)置元素 style 屬性有其獨(dú)特的優(yōu)勢(shì)和不足之處，以下是詳細(xì)分析：
優(yōu)點(diǎn)
- 減少 DOM 操作次數(shù)以提高性能：通過
setAttribute()方法將屬性的值直接設(shè)置到元素的屬性中，而非通過 JavaScript 對(duì)象來操作，能夠減少 DOM 操作的次數(shù)，進(jìn)而提高網(wǎng)頁性能。因?yàn)轭l繁的 DOM 操作會(huì)導(dǎo)致瀏覽器進(jìn)行重排和重繪，影響頁面的響應(yīng)速度和性能。 - 提高代碼的可讀性和可維護(hù)性：當(dāng)需要設(shè)置多個(gè)樣式屬性時(shí)，使用
setAttribute()方法可以將所有樣式集中在一個(gè)字符串中，使代碼更加簡(jiǎn)潔和易于理解，也便于后續(xù)的修改和管理。相比于多次使用element.style.property = value的方式，代碼結(jié)構(gòu)更加清晰。
- 減少 DOM 操作次數(shù)以提高性能：通過
缺點(diǎn)
樣式優(yōu)先級(jí)問題：使用
setAttribute()設(shè)置的內(nèi)聯(lián)樣式具有較高的優(yōu)先級(jí)，可能會(huì)覆蓋外部樣式表或內(nèi)部樣式表中的樣式。這可能導(dǎo)致樣式的控制變得復(fù)雜，難以預(yù)測(cè)最終的顯示效果。例如，如果外部樣式表中定義了某個(gè)元素的基本樣式，而使用setAttribute()設(shè)置了相同的樣式屬性，那么內(nèi)聯(lián)樣式將優(yōu)先顯示，可能破壞整體的樣式設(shè)計(jì)。缺乏動(dòng)態(tài)性和靈活性：使用
setAttribute()方法設(shè)置的樣式是靜態(tài)的，一旦設(shè)置就很難根據(jù)不同的條件動(dòng)態(tài)地修改樣式。而使用element.style可以更方便地在 JavaScript 中動(dòng)態(tài)修改單個(gè)樣式屬性。例如，如果需要根據(jù)用戶的交互動(dòng)態(tài)改變?cè)氐膶挾?，使?nbsp;element.style.width可以直接修改，而使用setAttribute()則需要重新設(shè)置整個(gè)style屬性字符串，操作相對(duì)繁瑣。
代碼可維護(hù)性在某些情況下降低：雖然
setAttribute()可以使代碼在一定程度上更加簡(jiǎn)潔，但當(dāng)樣式字符串過長(zhǎng)或包含復(fù)雜的樣式規(guī)則時(shí)，代碼的可讀性和可維護(hù)性會(huì)降低。例如，當(dāng)樣式字符串中包含大量的 CSS 屬性和值時(shí)，很難快速定位和修改特定的樣式屬性。
2.2 直接使用 DOM節(jié)點(diǎn).style.樣式名 = 樣式值的方式，這種方式可稱為“直接設(shè)置內(nèi)聯(lián)樣式”
原理
在 JavaScript 里，document.getElementById() 會(huì)獲取具有特定 id（）的元素。而獲取到的元素對(duì)象具備 style 屬性，該屬性能夠讓我們直接操作元素的內(nèi)聯(lián)樣式。通過給 style 屬性的具體樣式屬性（像 width、height、backgroundColor 等）賦值，就可以動(dòng)態(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)缺點(diǎn)分析
- 優(yōu)點(diǎn)
- 簡(jiǎn)單直接：可以迅速對(duì)元素的樣式進(jìn)行修改，不用去修改 CSS 文件或者操作類名，代碼編寫容易理解。
- 即時(shí)生效：設(shè)置之后元素的樣式會(huì)馬上改變，能夠?qū)崿F(xiàn)實(shí)時(shí)的交互效果。
- 缺點(diǎn)
- 無法設(shè)置 !important：當(dāng)使用這種方式設(shè)置樣式時(shí)，無法添加 !important 聲明，要是遇到有 !important 的樣式規(guī)則，此設(shè)置可能會(huì)失效。
- 可維護(hù)性差：如果有大量的樣式需要設(shè)置，會(huì)讓 JavaScript 代碼變得冗長(zhǎng)，并且不利于樣式的統(tǒng)一管理和維護(hù)。
2.3 修改元素的 classList 屬性
原理
classList 屬性是一個(gè) DOMTokenList 對(duì)象，它提供了一系列方法來操作元素的 CSS 類，如 add、remove、toggle 等。DOMTokenList 是一個(gè)類數(shù)組對(duì)象，代表了元素的 class 屬性中的一組標(biāo)記（即類名），這些方法可以讓我們方便地動(dòng)態(tài)修改元素的類名，從而改變?cè)氐臉邮健?/p>
常用方法及示例代碼
1. add() 方法
作用：用于向元素的 classList 中添加一個(gè)或多個(gè)類名。如果類名已經(jīng)存在，則不會(huì)重復(fù)添加。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動(dòng)態(tài)設(shè)置樣式 - classList 屬性</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<button id="highlightButton">高亮顯示</button>
<p id="myText">這是一段文本，點(diǎn)擊按鈕可以高亮顯示它。</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 類，元素的背景顏色會(huì)變?yōu)辄S色，字體會(huì)變粗。
代碼解釋
- 在 CSS 中定義了一個(gè)名為
highlight的類，該類包含了背景顏色和字體加粗的樣式。 - 通過
document.getElementById方法獲取按鈕和文本元素。 - 給按鈕添加一個(gè)點(diǎn)擊事件監(jiān)聽器。
- 當(dāng)按鈕被點(diǎn)擊時(shí)，使用
text.classList.add('highlight')方法給文本元素添加highlight類，從而改變其樣式。
2. remove() 方法
作用：用于從元素的 classList 中移除一個(gè)或多個(gè)類名。如果類名不存在，不會(huì)報(bào)錯(cuò)。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">這是一個(gè)測(cè)試 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">這是一個(gè)測(cè)試 div。</div>
<button onclick="toggleClass()">切換類名</button>
<script>
function toggleClass() {
const myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('highlight');
}
</script>
</body>
</html>
上述代碼中，擊按鈕時(shí)，toggle 方法會(huì)在 myDiv 元素的 classList 中切換 highlight 類的存在狀態(tài)，從而改變?cè)氐谋尘邦伾?/p>
4. contains() 方法
作用：用于檢查元素的 classList 中是否包含指定的類名。返回一個(gè)布爾值。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">這是一個(gè)測(cè)試 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é)果存儲(chǔ)在 hasHighlight 變量中。
使用 classList 屬性的優(yōu)勢(shì)
- 代碼簡(jiǎn)潔：使用 classList 提供的方法可以用較少的代碼實(shí)現(xiàn)類名的操作，避免了手動(dòng)拼接和解析 class 屬性字符串的繁瑣。
- 提高可讀性：方法名直觀地表達(dá)了操作的意圖，使代碼更易于理解和維護(hù)。
- 避免錯(cuò)誤：classList 方法會(huì)自動(dòng)處理類名的添加、移除和切換，避免了手動(dòng)操作可能導(dǎo)致的語法錯(cuò)誤和意外結(jié)果。
2.4 修改 <style> 標(biāo)簽的內(nèi)容
原理
可以通過 JavaScript 動(dòng)態(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>動(dòng)態(tài)設(shè)置樣式 - 修改 style 標(biāo)簽內(nèi)容</title>
</head>
<body>
<button id="changeStyleButton">改變樣式</button>
<div id="myDiv">這是一個(gè) div 元素，點(diǎn)擊按鈕可以改變它的樣式。</div>
<script>
const button = document.getElementById('changeStyleButton');
const div = document.getElementById('myDiv');
button.addEventListener('click', function () {
// 創(chuàng)建一個(gè)新的 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 元素。 - 給按鈕添加一個(gè)點(diǎn)擊事件監(jiān)聽器。
- 當(dāng)按鈕被點(diǎn)擊時(shí)，創(chuàng)建一個(gè)新的
<style>元素，并設(shè)置其內(nèi)容為新的 CSS 規(guī)則。 - 最后，將
<style>元素添加到<head>標(biāo)簽中，從而改變 div 元素的樣式。
四、總結(jié)
通過以上三種方式，我們可以在 JavaScript 中動(dòng)態(tài)設(shè)置 CSS 樣式。直接操作 style 屬性適合臨時(shí)、簡(jiǎn)單的樣式修改；修改 classList 屬性適合根據(jù)不同狀態(tài)切換預(yù)定義的樣式；修改 <style> 標(biāo)簽內(nèi)容適合動(dòng)態(tài)創(chuàng)建全局的 CSS 規(guī)則。在實(shí)際開發(fā)中，可以根據(jù)具體需求選擇合適的方式.
以上就是使用JavaScript動(dòng)態(tài)設(shè)置CSS樣式的三種常用方式的詳細(xì)內(nèi)容，更多關(guān)于JS動(dòng)態(tài)設(shè)置CSS樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JS動(dòng)畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解
這篇文章主要介紹了JS動(dòng)畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解,需要的朋友可以參考下2018-11-11
微信小程序調(diào)用PHP后臺(tái)接口 解析純html文本
這篇文章主要為大家詳細(xì)介紹了微信小程序調(diào)用PHP后臺(tái)接口，解析純html文本的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js數(shù)組操作學(xué)習(xí)總結(jié)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
原生javascript實(shí)現(xiàn)分享到朋友圈功能 支持ios和android
本文主要介紹網(wǎng)上一個(gè)牛人寫的js可以實(shí)現(xiàn)在UC瀏覽器和QQ瀏覽器中調(diào)用瀏覽器內(nèi)置的分享組件進(jìn)行分享。2016-05-05
js/ajax跨越訪問-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
最近做了一個(gè)項(xiàng)目，需要用子域名調(diào)用主域名下的一個(gè)現(xiàn)有的功能，于是想到了用jsonp來解決，在我們平常的項(xiàng)目中不乏有這種需求的朋友，于是記錄下來以便以后查閱同時(shí)也希望能幫到大家,需要了解的朋友可以參考下2012-12-12
JavaScript中Array實(shí)例方法map的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中Array實(shí)例方法map的實(shí)現(xiàn)方法,map() 方法創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是原數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript隨機(jī)位置鼠標(biāo)點(diǎn)擊檢測(cè)功能的實(shí)現(xiàn)方案
在JavaScript中獲取光標(biāo)位置通常指的是獲取鼠標(biāo)光標(biāo)在頁面上的坐標(biāo),或者是在文本框(input、textarea)中獲取光標(biāo)(插入點(diǎn))的位置,這篇文章主要介紹了JavaScript隨機(jī)位置鼠標(biāo)點(diǎn)擊檢測(cè)功能的實(shí)現(xiàn)方案,需要的朋友可以參考下2025-09-09
本文為大家介紹下前臺(tái)js調(diào)用后臺(tái)方法，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12