jQuery 样式操作

jQuery 样式操作

​ jQuery中常用的样式操作有两种：css() 和 设置类样式方法

方法1: 操作 css 方法

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

​ 常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

​ 注意：css() 多用于样式少时操作，多了则不太方便。

方法2: 设置类样式方法

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

​ 常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

​ 注意：

1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。