jQuery 样式操作

jQuery 样式操作

1、基本样式操作

说明：设置或获取-->元素的样式属性值

• 设置样式属性操作

场景一：设置单个样式
$(selector).css("color", "red");
// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值

场景二：设置多个样式
$(selector).css({"color": "red", "font-size": "30px"});
// 参数为 {}（对象）
//也可以设置单个样式

• 获取样式属性操作

场景：
var fs = $(selector).css("font-size");
// 参数表示要获取的 样式属性名称

2、类样式操作

用到的方法：
addClass() //添加
removeClass()//移除
hasClass()//判断
toggleClass()//切换

• 添加类样式

作用：为指定元素添加类className
$(selector).addClass("liItem");

• 移除类样式

作用：为指定元素移除类 className
$(selector).removeClass("liItem");
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类

• 判断有没有类样式

作用：判断指定元素是否包含类 className
var hasC = $(selector).hasClass("liItem");
//此时，会返回true或false

• 切换类样式

作用：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
$(selector).toggleClass("liItem");

• 注意点

   操作类样式的时候，所有的类名 都不带点（.）
经验：
1 操作的样式非常少，那么可以通过.css()这个 方法来操作
2 操作的样式很多，那么要通过使用类的方式来操作
3 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）

3、其他样式操作

$(selector).height()        // 设置或返回匹配元素的高度。 ( 数值类型 )
$(selector).width()         // 设置或返回匹配元素的宽度。
$(selector).css("height");  // 字符串类型

$(selector).offset()        // 返回第一个匹配元素相对于文档左上角的位置。left,top
$(selector).offsetParent()  // 返回最近的定位祖先元素。
$(selector).position()      // 返回第一个匹配元素相对于父元素的位置。
$(window).scrollLeft()      // 设置或返回匹配元素相对滚动条左侧的偏移。
$(window).scrollTop(0)      // 设置或返回匹配元素相对滚动条顶部的偏移。

$(selector).scroll(function() {}); // 滚动事件


对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0