web前端学习

概述

在JavaScript中可以用以下方法增删改查类属性

方法	释义
查看类	classList
类数量	classList.length
增加类	classList.add('newClass')
删除类	classList.remove('existingClass')
切换类	classList.toggle('toggleClass')
检查类	classList.contains('checkClass')
替换类	classList.replace('oldClass', 'newClass')

切换类即有'toggleClass'时删除该类，无'toggleClass'类是添加该类除此之外也可以用之前的getAttribute和setAttribute来对类进行查看和修改元素类的增删改查

1.查看类

	
<p id="attr_id" class="class1 class2 class3">
	查看类
</p>

查看类

	
attr_id = document.getElementById("attr_id");
console.info(attr_id.classList);
console.info(attr_id.classList.length);

2.增加类

	
<p id="attr_id1";>
	增加类
</p>

增加类

	
attr_id = document.getElementById("attr_id");
attr_id.classList.add('newClass');
console.info(attr_id.classList);

3.删除类

	
<p id="attr_id2" class="old_class">
	删除类			
</p>

删除类

	
var attr_id2 = document.getElementById("attr_id2");
console.log(attr_id2.classList);
function del_class(){			
	attr_id2.classList.remove("old_class");
	console.log(attr_id2.classList);
}

4.切换类

	
<p id="attr_id3" class="toggle_class">
	切换类				
</p>

切换类

	
var attr_id3 = document.getElementById("attr_id3");
console.log(attr_id3.classList);
function toggle_class(){
	attr_id3.classList.toggle("toggle_class");
	console.log(attr_id3.classList);
}

5.检查类

	
<p id="attr_id4" class="exist_class">
	检查类				
</p>

检查类

	
var attr_id4 = document.getElementById("attr_id4");
console.log(attr_id4.classList);
console.log('contains("exist_class"):'+attr_id4.classList.contains("exist_class"));
console.log('contains("no_exist_class"):'+attr_id4.classList.contains("no_exist_class"));

6.替换类

	
<p id="attr_id5" class="old_class">
	替换类
</p>

替换类

	
var attr_id5 = document.getElementById("attr_id5");
console.log(attr_id5.classList);
function replace_class(){
	attr_id5.classList.replace("old_class","new_class");
	console.log(attr_id5.classList);
}

7.getAttribute("class")

	
<p id="attr_id6" class="old_class1 old_class2">
	用getAttribute("class")获取类
</p>

用getAttribute("class")获取类

	
var attr_id6 = document.getElementById("attr_id6");
console.log(attr_id6.getAttribute("class"));

8.setAttribute("class")

	
<p id="attr_id7" class="old_class">
	用setAttribute("class")设置类
</p>
<button onclick="set_class()">点击设置</button>

用setAttribute("class")设置类

	
var attr_id7 = document.getElementById("attr_id7");
console.log(attr_id7.getAttribute("class"));
function set_class(){
	attr_id7.setAttribute("class","new_class");
	console.log(attr_id7.getAttribute("class"));
}