New attributes in HTML5: How to use the classList attribute

The content of this article is about the new attributes of HTML5: how to use the classList attribute. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The classList attribute has been added to HTML5, which is used to operate classes. Its API is as follows:

contains(value)：判断名为value的类名是否存在add(value)：添加名为value的类名
remove(value)：删除名为value的类名
toggle(value)：如果名为value的存在则删除，不存在则添加

js sample code:

//获取节点
var $test = document.getElementById("test");
//增加一个
class$test.classList.add("new-class");
//删除一个
class$test.classList.remove("old-class");
//存在则删除，不存在则添加
$test.classList.toggle("class");
//判断是否包含
$test.classList.contains("class");
//替换
class$test.classList.remove("old-class");
$test.classList.add("new-class");

Related recommendations:

What are the main structures of html file production?

Judgement of page visibility in HTML5 (with code)

How to solve the margin-top collapse problem in HTML5 (with code)

The above is the detailed content of New attributes in HTML5: How to use the classList attribute. For more information, please follow other related articles on the PHP Chinese website!