jQuery样式操作

获取样式和设置样式

this is p

样式其实就是class属性所以设置和获取样式都能用attr()方法来完成，attr()方法用法:http://www.cnblogs.com/kuangxin/p/4243991.html

追加样式

实例：

<style>

　　.high{

　　　　　　font-weight:bold;//字体加粗

　　　　　　color:red;//字体颜色设置为红色

　　　　 }

　　.another{

　　　　　　font-style:italic;//斜体

　　　　　　color:blue;//字体设置为蓝色

　　　　 }

</style>

this is p

jQuery代码：

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

结果：

this is p

此时在元素中同时拥有俩个class值，即‘hight’和‘another’。在css中有以下俩条规定：

（1）如果给一个元素添加了多个class值，那么就相当于合并了他们的样式。

（2）如果不同的class设定了同一样式属性，则后者覆盖前者。

在上例中相当于给元素添加了如下样式：

　　　　　　font-weight:bold;//字体加粗

　　　　　　color:red;//字体颜色设置为红色

　　　　　　font-style:italic;//斜体

　　　　　　color:blue;//字体设置为蓝色

在以上样式中，存在两个‘color’属性，而后面的‘color’属性会覆盖前面的‘color’属性，因此最终的’color‘属性的值为’blue‘，而不是’red‘，样式最终呈现为：

　　　　　　font-weight:bold;//字体加粗

　　　　　　font-style:italic;//斜体

　　　　　　color:blue;//字体设置为蓝色

attr和addClass()的区别：

this is p

$('p').addClass('high');//结果this is p

$('p').attr('class','high');//结果this is p

再次使用

$('p').addClass('another');//结果this is p

$('p').attr('class','another');//结果this is p

移除样式

实例：

HTML:

this is p

jQuery代码：

$('p').removeClass('high');//移除high样式

$('p').removeClass('another');//移除another样式

等价于

$('p').removeClass('high anothe');//移除high another样式

等价于

$('p').removeClass();//清空样式

结果：

this is p

切换样式

HTML：

this is p

jQuery代码：

$('p').toggleClass('another');//切换为another样式

注意！ toggleClass()方法会不停的在俩种样式之间切换,当class为myClass时，运行代码则切换为another，当class为another时，运行代码则切换为myClass

判断是否包含某个样式

jQuery代码：

var bool= $('p').hasClass('myClass');//判断p标记是否包含样式myClass,包含返回true，否则返回false

注意！这个方法是为了增强代码可读性而产生的，在jQuery内部实际上是调用了is()方法来完成这个功能的，上述代码等价于var bool=$('p').is('.myClass')

巴特西

jQuery样式操作

最新文章

热门文章