資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用純JavaScript在不同的li元素中新增類名？
類作為構建物件的模型。程式碼用於封裝資料，以便對其進行處理。雖然JS類基於原型，但它們也有一些ES5類不共享的獨特的語法和語義。
讓我們深入瞭解這篇文章，學習如何在純JavaScript中為不同的li新增類名。要新增類，請使用forEach()以及classList.add()。
JavaScript中的forEach()
對於陣列中的每個條目，forEach()方法都會呼叫不同的函式。處理空元素時，不使用此方法。給定函式可以對給定陣列的元素執行任何操作。
語法
以下是forEach()的語法
array.forEach(function(currentValue, index, arr), thisValue)
JavaScript中的classList.add()
classList屬性表示充當類元素值的DOMTokenList物件。雖然它是一個只讀屬性，但我們可以透過修改程式的類來更改其值。可以使用classList.add()方法向元素新增一個或多個類。
語法
以下是classList.add()的語法
element.classList
為了更好地理解如何在純JavaScript中為不同的li新增類名。
示例
在下面的示例中，我們正在執行指令碼以在不同的li中新增類名。
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #85C1E9 ;
}
.color2 {
color: #F1C40F ;
}
</style>
<body>
<ul>
<li>MSD</li>
<li>SKY</li>
<li>ABD</li>
</ul>
<script>
addClass();
function addClass() {
const list = document.querySelectorAll('li');
list.forEach(function(task, index) {
if (index === 0) {
task.classList.add('color1');
} else if (index === 2) {
task.classList.add('color2');
}
});
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個列表，其中專案使用帶樣式的CSS不同地新增，該CSS充當透過在web瀏覽器上使用classList.add()方法新增的類。
示例
在下面的示例中，我們使用document.querySelector('li:nth-of-type()')來更新單個元素的類。
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #BB8FCE ;
}
.color2 {
color: #EC7063 ;
}
</style>
<body>
<ul>
<li>SUPERMAN</li>
<li>SPIDERMAN</li>
<li>BATMAN</li>
</ul>
<script>
addClass();
function addClass() {
const firstLi = document.querySelector('li:nth-of-type(1)');
firstLi.classList.add('color1');
const secondLi = document.querySelector('li:nth-of-type(2)');
secondLi.classList.add('color2');
}
</script>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示列表，其中一些用CSS突出顯示，當用戶在網頁上執行指令碼時，事件會觸發，使其充當類。
示例
讓我們考慮另一個可以使用firstElementChild和nextElementSibling的示例。
<!DOCTYPE html>
<html>
<style>
.color1 {
color: #DFFF00 ;
}
.color2 {
color: #CCCCFF ;
}
</style>
<body>
<ul id="list">
<li>JACK</li>
<li>ROSE</li>
<li>SPARROW</li>
</ul>
<script>
function addClass()
{
const list = document.getElementById("list");
list.firstElementChild.classList.add("color1");
list.firstElementChild.nextElementSibling.classList.add("color2");
}
addClass();
</script>
</body>
</html>
當指令碼執行時，事件被觸發並顯示一個列表以及一些使用CSS應用的樣式，因為事件使它們充當在網頁上的列表中不同新增的類。
更新於：2023年1月18日
2K+ 次檢視
廣告