JQuery操作属性、样式、风格(attr、class、css)

时间：2024-04-08 11:34:13

样式操作 

<p class=”myclass” title=”选择喜欢的水果”>你最喜欢的水果是?</p>

在上面代码中，class也是p元素的属性，因此获取class和设置class都可以用attr()方法来完成

代码如下： 

var p_class=$("p").attr("class"); //获取p元素的class

也可以用attr()方法来设置class 

$("p").attr("class","high"); //将p元素的class设置为high

在大多数情况下，它是将原来的class替换成新的class，而不是在原来基础上追加新的class

新的代码为 

<p class="high" title="选择喜欢的水果">你最喜欢的水果是?</p>

追加样式 

<style>         
.another {             
Font-style: italic; /* 斜体 */             
Color: blue;/* 字体设为蓝色 */         
}     
</style>

在网页中追加一个样式 

$("input:eq(2)").click(function(){             $("p").addclass("another");         })

方法 

addClass()
attr()

对同一个网页操作 

<p>test</p>

第一次使用方法 

 $("p").addClass("high");  $("p").attr("class","high")

第一次结果 

<p class="high">test</p>;

再次使用方法 

$("p").addClass("another");

$("p").attr("class", "another")

结果 

<p class="high another">test</p>

<p class="another">test</p>

移除样式 removeClass() 

$("p").removeClass("high");

结果 

<p class="another">test</p>

将p两个类都移除 

$("p").removeclass("high") .removeClass("another");

或者 

$("p").removeClass();或者 $("p").removeClass("high another");或者 $("p").removeAttr("class");//移除class属性

结果

<p>test</p> 

移除样式 也可以用 removeAttr()。主要指移除属性 

 $("p").removeAttr("class");//移除class属性

切换样式

Jquery提供toggleClass()方法控制样式的切换 

$("p").toggleClass("another"); //对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果

判断是否包含某样式，如果有 返回true 否则 返回 false 

$("p").hasClass("another"); //相当于$("p").is(".another"); 

判对Class中或者说Style中的具体样式操作，可以使用css(),方法，例如

<p style="color:red">test</p>

如果修改color的值为blue，代码如下

 $("p").css("color", "blue")

相关文章