jQuery样式操作

时间:2021-10-19 02:07:05

获取样式和设置样式

<p class='myClass'  title='this is p'>this is p</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>

<p class="high" title="this is p">this is p</p>

jQuery代码:

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

结果:

<p class="hight another" title="this is p">this is p</p>

此时在<p>元素中同时拥有俩个class值,即‘hight’和‘another’。在css中有以下俩条规定:

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

(2)如果不同的class设定了同一样式属性,则后者覆盖前者。

在上例中相当于给<p>元素添加了如下样式:

      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()的区别:

<p>this is p<p>

$('p').addClass('high');//结果<p class='high'>this is p</p>

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

再次使用

$('p').addClass('another');//结果<p class='high another'>this is p</p>

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


移除样式

实例:

HTML:

<p class='high another'>this is p</p>

jQuery代码:

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

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

等价于

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

等价于

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

结果:

<p>this is p</p>


切换样式

HTML:

<p class='myClass'>this is p</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')