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

2021-10-23 22:31:14 阅读：211 来源： 互联网

标签：box ... classList js width let lis 类名

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>

标签：box,...,classList,js,width,let,lis,类名
来源： https://blog.csdn.net/weixin_45990765/article/details/120910289

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9