js基础知识——DOM操作之CSS

<p id="pId" name="myName" class="myClass">这是一行文字</p>
<script type="text/javascript">
	let element = document.querySelector("#pId");
</script>

一、类class

1、class是标签的属性，可以用设置属性的方法来设置。

//将class属性设置为newClass
element.setAttribute("class","newClass");
//将class属性设置为""，即清除class属性的值
element.setAttribute("class","");
//获取element的class属性
element.getAttribute("class");
//删除class属性
element.removeAttribute("class");

2、使用className设置/获取类

console.log(element.className); //myClass
element.className = "newClass";
console.log(element.className); //newClass

3、使用classList属性

classList属性返回一个DOMTokenList，是类名的集合，为只读属性，但可以使用 add() 、remove() 、replace()、toggle()方法修改。
contains()是否含有指定类名。

console.log(element.classList);//DOMTokenList(2) ["myClass", value: "myClass"]

//给element元素添加newClass类
element.classList.add("newClass");
//删除newClass类
element.classList.remove("newClass");
//element是否含有newClass类
console.log(element.classList.contains("newClass")); //false
//将myClass替换成newClass
element.classList.replace("myClass","newClass");
// 如果 newClass 类值已存在，则移除它，否则添加它
element.classList.toggle("newClass");

二、样式style

1、使用setAttribute设置属性，和上面的一样就不做例子了。

2、使用style属性，设置单个样式

//设置
element.style.background="#fea";
//获取
console.log(element.style.background); //rgb(255, 238, 170)

3、使用cssText批量操作样式

//设置
element.style.cssText="color:#fea;background:#60afed;";
//获取
console.log(element.style.cssText); //color: rgb(255, 238, 170); background: rgb(96, 175, 237);