HTML DOM Element classList 属性

定义和用法

classList 属性返回元素的 CSS 类名。

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

const list = element.classList;
list.add("myStyle");

亲自试一试

例子 2

从元素中删除 "myStyle" 类：

const list = element.classList;
list.remove("myStyle");

亲自试一试

例子 3

切换 "myStyle" 的开闭：

const list = element.classList;
list.toggle("myStyle");

亲自试一试

提示：页面下方提供更多实例。

语法

element.classList

返回值

类型 描述
对象 DOMTokenList。元素的类名列表。

注释：classList 属性是只读的，但您可以使用下面列出的方法从列表中添加、切换或删除 CSS 类：

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() Suorita paluutoiminto jokaiselle luettelosta merkkijonolle.
item() Palauta määritetyn indeksin merkkijono.
keys() Palauta iteraattori, joka sisältää luettelosta avaimet.
length Palauta luettelosta merkkijonon määrä.
remove() Poista yksi tai useita merkkijonoja luettelosta.
replace() Korvaa luettelon merkkijonot.
supports() Jos merkkijono on ominaisuuden tukema merkkijono, palauta true.
toggle() Vaihda merkkijonon merkkijonoihin.
value Palauta merkkijonona merkkijonot.
values() Palauta iteraattori, joka sisältää listan arvot.

Lisää esimerkkejä

Esimerkki 4

Lisää useita luokkia elementtiin:

element.classList.add("myStyle", "anotherClass", "thirdClass");

亲自试一试

Esimerkki 5

Poista useita luokkia elementistä:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

亲自试一试

Esimerkki 6

Kuinka monta luokkaa elementillä on?

let numb = element.classList.length;

亲自试一试

Esimerkki 7

Hanki elementin "myDIV" luokat:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Olen myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

亲自试一试

Esimerkki 8

Hanki elementin ensimmäinen luokka:

let className = element.classList.item(0);

亲自试一试

Esimerkki 9

Onko elementillä "myStyle"-luokka?

let x = element.classList.contains("myStyle");

亲自试一试

Esimerkki 10

Jos elementillä on "myStyle"-luokka, poista "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

亲自试一试

Esimerkki 11

Vaihda luokkien välillä luodaksesi pudotusvalikon:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

亲自试一试

例子 12

创建粘性导航栏：

// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当您到达其滚动位置时，将 sticky 类添加到导航栏
// 离开滚动位置时将其删除
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试

浏览器支持

所有浏览器都支持 element.classList：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器

DOMTokenList 对象

className 属性

getElementsByClassName() 方法

HTML DOM Style-objekti