使用JavaScript動(dòng)態(tài)設(shè)置CSS樣式的三種常用方式
一、理論基礎(chǔ)
1.1 三種主要的方式
在 JavaScript 中，有三種主要的方式可以動(dòng)態(tài)設(shè)置 CSS 樣式：
- 直接操作元素的 style 屬性：這是最直接的方式，通過(guò) JavaScript 直接修改元素的內(nèi)聯(lián)樣式。
- 修改元素的 classList 屬性：通過(guò)添加、移除或切換元素的 CSS 類來(lái)改變樣式。
- 修改 <style> 標(biāo)簽的內(nèi)容：通過(guò) JavaScript 動(dòng)態(tài)修改 <style> 標(biāo)簽中的 CSS 規(guī)則。
1.2 優(yōu)先級(jí)說(shuō)明
不同的樣式設(shè)置方式有不同的優(yōu)先級(jí)，內(nèi)聯(lián)樣式（通過(guò) style 屬性設(shè)置）的優(yōu)先級(jí)最高，其次是 <style> 標(biāo)簽中的樣式，最后是外部 CSS 文件中的樣式。
二、具體實(shí)現(xiàn)方法及示例
2.1 直接使用元素的 setAttribute() 方法操作元素的 style 屬性
原理
在 JavaScript 里，setAttribute() 是 DOM 元素對(duì)象的一個(gè)方法，可用于為指定的 HTML 元素設(shè)置屬性值。它的基本語(yǔ)法如下：
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)頁(yè)開發(fā)中，使用 setAttribute() 方法設(shè)置元素 style 屬性有其獨(dú)特的優(yōu)勢(shì)和不足之處，以下是詳細(xì)分析：
優(yōu)點(diǎn)
- 減少 DOM 操作次數(shù)以提高性能：通過(guò)
setAttribute()方法將屬性的值直接設(shè)置到元素的屬性中，而非通過(guò) JavaScript 對(duì)象來(lái)操作，能夠減少 DOM 操作的次數(shù)，進(jìn)而提高網(wǎng)頁(yè)性能。因?yàn)轭l繁的 DOM 操作會(huì)導(dǎo)致瀏覽器進(jìn)行重排和重繪，影響頁(yè)面的響應(yīng)速度和性能。 - 提高代碼的可讀性和可維護(hù)性：當(dāng)需要設(shè)置多個(gè)樣式屬性時(shí)，使用
setAttribute()方法可以將所有樣式集中在一個(gè)字符串中，使代碼更加簡(jiǎn)潔和易于理解，也便于后續(xù)的修改和管理。相比于多次使用element.style.property = value的方式，代碼結(jié)構(gòu)更加清晰。
- 減少 DOM 操作次數(shù)以提高性能：通過(guò)
缺點(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)樣式字符串過(guò)長(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)樣式。通過(guò)給 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)
- 無(wú)法設(shè)置 !important：當(dāng)使用這種方式設(shè)置樣式時(shí)，無(wú)法添加 !important 聲明，要是遇到有 !important 的樣式規(guī)則，此設(shè)置可能會(huì)失效。
- 可維護(hù)性差：如果有大量的樣式需要設(shè)置，會(huì)讓 JavaScript 代碼變得冗長(zhǎng)，并且不利于樣式的統(tǒng)一管理和維護(hù)。
2.3 修改元素的 classList 屬性
原理
classList 屬性是一個(gè) DOMTokenList 對(duì)象，它提供了一系列方法來(lái)操作元素的 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>
上述代碼中，通過(guò) add 方法為 id 為 myText 的元素添加了 highlight 類，元素的背景顏色會(huì)變?yōu)辄S色，字體會(huì)變粗。
代碼解釋
- 在 CSS 中定義了一個(gè)名為
highlight的類，該類包含了背景顏色和字體加粗的樣式。 - 通過(guò)
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)致的語(yǔ)法錯(cuò)誤和意外結(jié)果。
2.4 修改 <style> 標(biāo)簽的內(nèi)容
原理
可以通過(guò) JavaScript 動(dòng)態(tài)創(chuàng)建或修改 <style> 標(biāo)簽中的 CSS 規(guī)則，從而改變頁(yè)面中元素的樣式。
示例代碼
<!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>
代碼解釋
- 通過(guò)
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é)
通過(guò)以上三種方式，我們可以在 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)文章
xmlplus組件設(shè)計(jì)系列之路由（ViewStack)（7）
xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章是JavaScript插件化開發(fā)系列教程的第五篇，還是著重于實(shí)戰(zhàn)，通過(guò)具體的實(shí)例來(lái)學(xué)習(xí)jQuery的方式如何開發(fā)插件，有相同需求的小伙伴來(lái)參考下吧。2015-02-02
用JavaScript實(shí)現(xiàn)動(dòng)畫效果的方法
大家在使用Dreamweaver中的時(shí)間線功能或以做出很有趣的動(dòng)畫效果，Dreamweaver會(huì)自動(dòng)為用戶生成特定的程序代碼，大家有沒有想過(guò)動(dòng)畫的實(shí)現(xiàn)原理呢？2013-07-07
這篇文章主要介紹了vant倒序年月日期組件封裝實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
JavaScript 異步調(diào)用框架 (Part 6 - 實(shí)例 & 模式)
我們用了5篇文章來(lái)討論如何編寫一個(gè)JavaScript異步調(diào)用框架（問題 & 場(chǎng)景、用例設(shè)計(jì)、代碼實(shí)現(xiàn)、鏈?zhǔn)秸{(diào)用、鏈?zhǔn)綄?shí)現(xiàn)），現(xiàn)在是時(shí)候讓我們看一下在各種常見開發(fā)情景中如何使用它了。2009-08-08
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文給大家介紹了js控制臺(tái)的使用，非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友參考下吧2018-07-07
JS區(qū)分瀏覽器頁(yè)面是刷新還是關(guān)閉
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁(yè)面是刷新還是關(guān)閉標(biāo)簽頁(yè)，非常實(shí)用，感興趣的童鞋參考下吧2016-04-04
這篇文章主要介紹了js數(shù)組去重的11種方法，對(duì)js數(shù)組感興趣的同學(xué)，可以把這11種方法實(shí)驗(yàn)一下2021-04-04
Easyui form combobox省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Easyui form combobox省市區(qū)三級(jí)聯(lián)動(dòng) 的相關(guān)資料,需要的朋友可以參考下2016-01-01