jQuery操作CSS属性的相关方法

1.前言

jQuery提供了以下几种操作DOM元素CSS样式的方法，包括直接访问、修改DOM元素的class属性值，还提供了访问、修改DOM元素内联CSS属性值的方法，除此之外还提供了大量直接访问、修改DOM元素大小和位置的方法。

jQuery提供的操作CSS属性的相关方法如下。

 

1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上。

2)        hasClass(class):判断该jQuery对象是否包含至少一个具有指定CSS定义的DOM对象。

3)        removeClass(class):删除jQuery对象所包含的所有DOM对象上指定CSS定义。

4)        toggleClass(class):如果添加jQuey对象包含的所有DOM对象上具有指定的CSS定义，则删除该CSS定义；否则添加该CSS定义。

5)        css(name):返回该jQuery对象包含的第一个匹配的DOM对象上名为naem的CSS属性值。

6)        cssname,value):为jQuery对象包含的所有DOM对象设置单个CSS属性值。

7)        css(properties):为jQuery对象包含的所有DOM对象同时设置多个CSS属性值。

8)        offset():获取jQuery对象包含的第一个匹配的DOM对象相对于该文档的位置。

9)        position():获取jQuery对象包含的第一个匹配的DOM对象相对于其父元素的位置。

10)    scrollTop():获取jQuery对象包含的第一个匹配所有的DOM对象的scroll top值。

11)    scrollTop(val):设置jQuery对象里包含的所有DOM对象的scrollleft值。

12)    scrollLeft():获取jQuery对象包含的所有DOM对象的scrollleft值。

13)    scrollLeft(val)：获取jQuery对象包含的所有DOM对象的scrollleft值。

14)    height:返回jQuery对象里第一个匹配元素的当前高度（以px为单位）

15)    height(val):设置jQuery对象里所有元素的高度，val的单位为px.

16)    width():返回jQuery对象里所有元素的宽度（以px为单位）

17)    width(val)：设置jQuery对象里所有元素的宽度，val的单位为px。

2.例子

下面的程序示范了开发自定义CSS属性

3.运行结果