jQuery样式操作

jQuery样式操作#

操作css方法#

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

                           
   jQuery
                           $ (this).css('color');
                       

2. 参数是
   (属性名，属性值)
   ，是设置一组样式，属性必须加引号，值若是数字可以不用跟单位和引号

                           
   jQuery
                           $(this).css('color','red');
                           $(this).css('width',200);
                       

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

   如果不加引号，遇见 font-size 或 background-color 这样的复合属性，注意使用驼峰命名法的方式书写为 fontSize / backgroundColor

                           
   jQuery
                           $(this).css({
                           'color':'red',
                           'font-size':20
                           });
                       

   泥嚎吗？

设置类样式方法#

作用等同于 classList ，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

                           
   jQuery
                           $('this').addClass('addnew');
                       

2. 删除类

                           
   jQuery
                           $(this).removeClass('addnew');
                       

3. 切换类

                           
   jQuery
                           $(this).toggleClass('current');
                       

点击--addClass添加类

点击--removeClass删除类

点击--toggleClass切换类

类操作与className区别#

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。