jQuery|jQuery 样式操作

样式设置 css() 访问匹配元素的某一样式或对其进行设置,可以单个设置CSS样式,也可以使用{}一次性设置多个CSS样式

如果有多个单词,可以使用驼峰形式,也可以使用CSS中的单词命名方式
如:background-colorbackgroundColor均可
HELLO

批量样式 通常会在书写CSS代码时会对一个class类的标签做统一的样式设置,当腰应用这些样式时直接添加class属性即可,这也是推荐的做法
hasClass() 检测元素是否具有某一class属性值,返回boolean类型

addClass() 为jQuery对象中的元素添加class

removeClass() 将jQuery对象中的某一class进行移除

toggleClass() 如果存在(不存在)就删除(添加)一个类。

元素位置 视口距离 【jQuery|jQuery 样式操作】使用offset()可获取与设置当前元素位于视口的位置。
返回的对象包含两个整型属性:topleft,以像素计。此方法只对可见元素有效。
HELLO

父级距离 使用position()获取标签对象对于已定位的父级元素的位置信息。
HELLO

元素尺寸 height()&width() height()取得匹配元素当前计算的内容区域高度值(px)
width()取得匹配元素当前计算的内容区域宽度值(px)
仅内容区域
 jQuery|jQuery 样式操作
文章图片


innerHeight()&innerWidth() innerHeight()取得匹配元素当前计算的内容区域以及内边距之内的补白区域高度值(px)
innerWidth()取得匹配元素当前计算的内容区域以及内边距之内的补白区域宽度值(px)
包括内容区域,内边距补白区域
jQuery|jQuery 样式操作
文章图片


outerHeight()&outerWidth() outerHeight()取得匹配元素当前计算的内容区域以及内边距之内的补白区域和边框区域高度值(px)
outerWidth()取得匹配元素当前计算的内容区域以及内边距之内的补白区域和边框区域宽度值(px)
包括内容区域,内边距补白区域,边框区域
jQuery|jQuery 样式操作
文章图片



滚动条相关 scrollTop() 获取或设置当前对象的纵向滚动条的位置
底部

scrollLeft() 获取或设置当前对象的横向滚动条的位置

    推荐阅读