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

待我称王封你为后i 2022-12-27 14:02 189阅读 0赞

<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);