原生js操作元素类名(classList,classList.add...)

2024-02-04 21:28:40

1、classList

classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类)

length:返回类列表中类的数量，该属性是只读的

<style>
    .lis {
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }

    .box {
        width: 100px;
        height: 100px;
        border: 1px solid #e15671;
    }
    .red {
        background: red;
    }
    .width {
        width: 200px;
    }
</style>
<body>
    <ul>
        <li class="lis red width">111</li>
    </ul>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    let list = box.classList;
    console.log(list.length);//1
    console.log(list);//DOMTokenList ['box', value: 'box']

    let lists = document.querySelector(".lis");
    let len = lists.classList;
    console.info(len.length);//3
    console.info(len);//DOMTokenList(3) ['lis', 'red', 'width', value: 'lis red width']

</script>

2、classList.add(className1,className2…);

添加一个或多个类名，如果指定的类名存在，则不添加

	<style>
		.mystyle {
			width: 300px;
			height: 50px;
			background-color: skyblue;
			color: white;
			font-size: 25px;
		}
		
           .once{
			padding: 20px;
			border: 2px solid orange;
		}
	</style>
	<body>
		<button onclick="myFun()">点我</button>
		<div id="boss">
			我是一个 div
		</div>
	</body>
	<script>
        //添加一个类样式
		function myFun() {
			let divCla = document.getElementById("boss");
			let style = divCla.classList.add("mystyle");
		}
        
        //添加两个及两个以上类样式 类名用逗号','隔开
        function myFun() {
			let divCla = document.getElementById("boss");
			let style = divCla.classList.add("mystyle","once");
		}
	</script>

3、classList.contains(className);

判断指定的类名是否存在，返回布尔值(true:存在；false:不存在)

	<style>
		.lis {
			width: 200px;
			height: 100px;
			background-color: skyblue;
		}
		.red {
			background: red;
		}

		.width {
			width: 200px;
		}
	</style>
	<body>
		<ul>
			<li class="lis red width">111</li>
		</ul>
	</body>
	<script>
        let lis = document.getElementsByClassName("lis")[0];
        let style = lis.classList.contains('red');
        console.log(style);//true 存在类名

        let style1 = lis.classList.contains('height');
        console.log(style1);//false
	</script>

4、classList.item(index);

返回索引值对应的类名 [索引值在区间范围外返回null]

	<style>
		.lis {
			width: 200px;
			height: 100px;
			background-color: skyblue;
		}
		.red {
			background: red;
		}
		.width {
			width: 200px;
		}
	</style>
	<body>
		<ul>
			<li class="lis red width">111</li>
		</ul>
	</body>
	<script>
        //第一个类名 根据索引查询
        let lis = document.getElementsByClassName("lis")[0];
        let className = lis.classList.item(0);
        console.log(className);//lis
        //第二个类名
        let className2 = lis.classList.item(1);
        console.log(className2);//red
			
	</script>

5、classList.remove(className1,className2…);

移除一个或多个类名 [移除不存在的类名，不会报错]

	<style>
		.mystyle {
			width: 300px;
			height: 50px;
			background-color: skyblue;
			color: white;
			font-size: 25px;
		}
		
		.once{
			padding: 20px;
			border: 2px solid orange;
		}
	</style>
	<body>
		<button onclick="myFun()">点我</button>
		<div id="boss" class="mystyle">
			我是一个 div
		</div>
	</body>
	<script>
		function myFun() {
			let box = document.querySelector('#boss');
			let list = box.classList.remove("mystyle");
            
            // 移除不存在的类名 不会报错
            //let box = document.querySelector('#boss');
			//let list = box.classList.remove("once");
		}

	</script>

6、classList.toggle(className[, true | false]);

切换类名；

第一个参数为要移除的类名，并返回false；若该参数不存在则添加类名，返回true

第二个参数为布尔值，设置是否强制添加或移除类，不论类名是否存在

	<style>
		.mystyle {
			width: 300px;
			height: 50px;
			background-color: skyblue;
			color: white;
			font-size: 25px;
		}
		.box {
			width: 100px;
			height: 100px;
			border: 1px solid #e15671;
		}
	</style>
	<body>
		<button onclick="myFun()">点我</button>
		<div id="boss" class="mystyle">
			我是一个 div
		</div>
	</body>
	<script>
		function myFun() {
			//添加类名
			let box = document.querySelector('#boss');
			let list = box.classList.toggle("box");
            //给两个值的时候
            //移除类名
			let removeList = box.classList.toggle('mystyle',false);
			//添加类名
			let addList = box.classList.toggle('box',true);
		}
	</script>

7、classList.replace( oldClassName，newClassName );

替换类名，返回布尔值,true表示替换成功

第一个参数为被替换的类名

第二个参数为要替换的新类名

	<style>
		.mystyle {
			width: 300px;
			height: 50px;
			background-color: skyblue;
			color: white;
			font-size: 25px;
		}
		.box {
			width: 100px;
			height: 100px;
			border: 1px solid #e15671;
		}
	</style>
	<body>
		<button onclick="myFun()">点我</button>
		<div id="boss" class="mystyle">
			我是一个 div
		</div>
	</body>
	<script>
		function myFun() {
			let box = document.querySelector('#boss');
			let replace = box.classList.replace('mystyle','box');
		}
        
	</script>

码农公寓