javascript系列之classList属性

一.欢迎来到我的酒馆

       在本章节介绍classList属性。

目录

    • 一.欢迎来到我的酒馆
    • 二.什么是classList
    • 三.使用classList API操作class属性

二.什么是classList

       classList属性是一个只读的属性,它会返回一组HTML元素class属性值。它可以用于操作class属性列表。使用classList属性可以很便捷的访问元素的class属性值,这些class属性值通过className获得并使用空格分割。
       一个DOMTokenList表示一个元素的class属性值的内容。如果一个元素的class属性为空或没有设置,它会返回一个空的DOMTokenList,而且它的length属性会变为0。
       尽管classList属性它本身是一个只读属性,但是你可以使用DOMTokenList的函数来操作classList,这些函数有:add(),remove(),replace()和toggle()。
       你可以测试一个元素是否包含给定的class属性,通过使用classList.contains()函数。

html代码:

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <script src="./main.js">script>
  body>
html>

javascript代码:

//使用DOM创建一个div元素
const div = window.document.createElement("div");

//给一个div元素添加一个class属性
div.className = "container";

console.log(div);

输出:

<div class="container">div>

三.使用classList API操作class属性

       虽然classList属性是只读的,但是你可以通过DOMTokenList接口提供的API来操作class属性。
3.1 向一个元素中添加一个class属性:

//使用DOM创建一个div元素
const div = window.document.createElement("div");

//给一个div元素添加一个class属性
div.className = "container";

//给div元素在末尾添加一个class属性
div.classList.add("");

console.log(div.outerHTML);

输出:

<div class="container "></div>

3.2 向一个元素中移除一个class属性:

//删除一个class属性值
div.classList.remove("");

console.log(div.outerHTML);

输出:

<div class="container"></div>

3.3 toggle()

//toggle() 如果设置了指定的class属性名,则删除它,否则新建一个。
div.classList.toggle("❤️");
var i = 5;
//如果第二个参数的值为true则添加一个class属性,否则不添加。
div.classList.toggle("", i < 10);

console.log(div.outerHTML);

输出:

<div class="container ❤️ "></div>

3.4 判断一个元素的class属性是否包含指定的class

var con = div.classList.contains("");
console.log(con);

输出:

false

3.5 替换一个元素的class属性

//使用属性""替换掉""
div.classList.replace("", "");
console.log(div.outerHTML);

输出:

<div class="container ❤️ "></div>

3.6 批量添加和删除class属性

div.classList.add("", "", "");
div.classList.remove("", "");
console.log(div.outerHTML);

输出:

<div class="container ❤️  "></div>

你可能感兴趣的:(javascript,开发语言,ecmascript)