🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 样式操作 ### 1.获取和设置样式 我们一般在用 class 属性添加样式,因此可以用`attr()`方法来完成。 ~~~javascript $("p").attr("class") $("p").attr("class","high"); ~~~ ### 2.追加样式 jQuery 提供了`addClass()`方法来追加样式。 ~~~javascript $("p").addClass("another"); ~~~ ### 3.移除样式 相对应的,使用`removeClass()`方法来删除 class 的某个值,他的作用是从匹配的的元素中删除全部或指定的 class 。 ~~~javascript //删除所有样式 $("p").removeClass(); //删除指定样式 $("p").removeClass("high"); ~~~ ### 4.切换样式 jQuery 提供了`toggleClass()`方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。 ~~~ $("p").toggleClass("another"); ~~~ ### 5.判断是否含有某个样式 `hasClass()`可以用来判断元素中是否含有某个 class 。 ~~~ $("p").hasClass("another"); ~~~ > 本节所有代码: > jqueryDomStyle.html ~~~javascript $(function(){ //获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); //追加样式 $("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) }); }); ~~~