类也是节点元素的属性,因此获取类和设置类都可以使用attr()方法来完成
直接使用attr()方法设置类属性,会将原来的类属性替换掉
如果在添加新的样式时,还需要保留原有样式,可以使最好选择用addClass()替代用方法
注意:当一个节点元素包含了多个类样式时,将按照以下方式进行处理:
<李>如果给一个元素添加了多个类值,那么就相当于合并了它们的样式李
<李>如果有不同的课设定了同一样式属性,则后者覆盖前者,
李
如果要删除类某个值,可以使用removeClass()方法完成,它的作用是从匹配的元素中删除全部或者指定的类
不传递参数时,删除所有;给定参数时只删除指定的类
hasClass()方法可以用来判断元素中是否包含某个类,如果有则返回真,否则返回假
案例源码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> DOM样式操作& lt;/title>
& lt;脚本src=" https://www.yisu.com/js/jquery-3.1.1.js "祝辞& lt;/script>
& lt; script>//$(函数(){//给id为p2的元素添加一个样式p_content
$ (" # btn1 ") .click(函数(){
$ (" # p2) .attr(“类”、“p_content”);
});//追加样式
$(" #这里”).click(函数(){
$ (" # p1) .addClass (“p_bg”);
});//移除样式
$ (" # btn3 ") .click(函数(){//如果removeClass里面不写参数的话,就是移除全部样式
$ (" # p1) .removeClass (“p_bg”);
$ (" # p2”) .addClass (p_bg) .removeClass (“p_content”);
});//判断样式
$ (" # btn4 ") .click(函数(){
警报($ (" # p2”) .hasClass (p_content "));
});
}）
& lt;/script>
& lt; style>
.p_content {
颜色:红色;
字体大小:15 px;
}
.p_bg {
背景颜色:红色;
颜色:黄色;
粗细:大胆的;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p id=皃1”class=皃_content”在你最喜欢的水果& # 63;& lt;/p>
& lt; ul>
& lt;李title=捌还痹谄还? lt;/li>
& lt;李title=敖邸弊幼４墙圩? lt;/li>
& lt;李title=跋憬丁痹谙憬? lt;/li>
& lt;/ul>
& lt; p id=皃2”在你最喜欢的运动是吗? & lt;/p>
& lt; ul>
& lt; li>游泳& lt;/li>
& lt; li>篮球& lt;/li>
& lt; li>足球& lt;/li>
& lt;/ul>
& lt;按钮id=" btn1 "祝辞设置和获取样式& lt;/button>
& lt;按钮id="这里"祝辞追加样式& lt;/button> & lt; br/祝辞& lt; br/比;
& lt;按钮id=" btn3 "祝辞移除样式& lt;/button>
& lt;按钮id=" btn4 "祝辞判断样式& lt;/button> & lt; br/祝辞& lt; br/比;
& lt;/body>
& lt;/html>
,
之前
以上所述是小编给大家介绍的JQueryDOM之样式操作详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
