jQuery: 整理2—操作元素的样式

1.获取元素的class属性值

attr(“class”)

天蓝色const cla = $("#conBlue").attr("class")console.log(cla) // blue larger

2.设置元素的样式

attr(“class”, “样式名”)

div{padding: 8px;width: 180px;}.blue {background-color: blue;}.larger {font-size: 30px;}.green{background-color: green;}天蓝色// 设置样式:attr("class", "样式名") -> 原本的样式会被覆盖$("#conBlue").attr("class", "green")// 此时class="blue larger"变为class="green" 原本的样式被覆盖了

3.添加样式

addClass(“样式名”)

div{padding: 8px;width: 180px;}.blue {background-color: blue;}.larger {font-size: 30px;}.green{background-color: green;}.pink{background-color: pink;}天蓝色$("#conBlue").addClass("pink") // -> 在原来的基础上添加，不会覆盖原来的，如果出现相同的样式，则以 后定义 的为准

4.添加具体的样式

css()

天蓝色$("#conBlue").css("font-size","40px")

5.移除样式

removeClass(“样式名”)

天蓝色$("#remove").removeClass("blue")// 此时class="blue larger"变为class="larger"