JQuery知識修改CSS屬性以及特殊的樣式函數(shù)介紹

#1 CD RipperCD音頻處理工具V1.90版

• 類型：音頻處理大�。�1M語言：中文 評分：5.1
• 標簽：

立即下載

在一個html頁面中，我們有兩種方式來控制一個對象的樣式，用HTML attribute控制，或者用CSS類來控制，這兩種方法雖然都能控制對象的樣式，但是通過CSS來控制對象的樣式，將內(nèi)容和呈現(xiàn)分離開來是更為推薦的一種方法。JQuery提供了豐富的控制CSS樣式的方法。

修改CSS類

我們可以通過attr和prop來直接修改對象的CSS類，但是一個對象可以有多個CSS類，我們有時只是想增加或者去掉一個CSS類，這時，用attr和prop就不是那么方便了，JQuery提供了如下便利的方法來修改CSS類

1.增加CSS類

addClass(classname|function(index, currentClass))

可用空格隔開需要增加的多個CSS類

2.除去CSS類

removeClass([classname]|function(index, currentClass))

可用空格隔開需要除去的多個CSS類，如果不指定CSS類，則除去所有CSS類。

3.判斷是否有CSS類

hasClass(classname)

4.交互增刪CSS類

toggleClass([classname][,switch]|function(index, class,switch)[,switch])

當提供classname時則增刪指定的CSS類，當不提供時則增刪所有擁有的CSS類。

當提供switch,則根據(jù)其true或false指，增或者刪，否則，根據(jù)CSS類是否存在增或者刪。

修改CSS屬性

1.css(propertyName|propertyNames)

獲取css屬性值，1.9版新增用屬性名數(shù)組來獲取多個css屬性的方法。如

$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])

將獲取一個包含各屬性值的數(shù)組。

2.css(propertyName,value|propertyName,function(index,value)|properties)

設(shè)置css屬性值，1.6版新增用+=和-=在原有值的基礎(chǔ)上設(shè)置屬性值的方法，如css("width"."+=100")在原有width值的基礎(chǔ)上加上100.

css函數(shù)擁有極為強大的兼容性，CSS和DOM的樣式屬性都能用在css函數(shù)中，比如background-color和backgroundColor都能被css用來設(shè)置背景。

特殊的樣式函數(shù)

css看起來如此的強大，我們似乎不需要別的函數(shù)來獲取樣式值了，可是JQuery為我們想得更多。

我們知道用css('width')來獲取寬度時得到的是'400px'這種帶px的字符串,而我們有時候需要用400這個值來做一些算術(shù)計算，這時JQuery為我們提供了一系列的函數(shù)來獲取這些特殊的算術(shù)值。

1.獲取長寬算術(shù)值

width(),height()

獲取內(nèi)容的長寬值，這個值不包括padding,border,margin部分

innerWidth(),innerHeight()

獲取內(nèi)部的長寬值，這個值是width()和height()的值加上padding部分。

outerWidth(),outerHeight()

獲取外部的長寬值，這個值是width()和height()的值加上padding和border部分。但是不包括margin。

outerWidth(true),outerHeight(true)

獲取外部的長寬值，這個值是width()和height()的值加上padding,border和margin部分。

注意:對于window和document對象來說，它們不存在padding,border,margin部分，因此只能對它們使用width()和height()函數(shù)。

2.設(shè)置長寬值

height(value|function(index,height))

可以設(shè)置的值為100px，50%，auto等，當只設(shè)定為100，而沒有指定其單位時，px是其默認單位。

注意:我們只能設(shè)置內(nèi)容的長寬值，而不能設(shè)置inner或outer長寬值。

3.獲取位置

offset()

獲取對象集中第一個對象相對于document的位置

position()

獲取對象集中第一個對象相對于其parent的位置

注意:獲取到的位置信息為{left:100,top:20}這種形式的數(shù)據(jù)。

4.設(shè)置位置

offset(coords|function(index,coords))

對象集中對象相對于document的位置,用{left:100,top:20}這種形式的數(shù)據(jù)來進行設(shè)置。

5.獲取和設(shè)置其滾動屬性

scrollLeft([value])

獲取和設(shè)置其向右滾動的值

scrollTop([value])

獲取和設(shè)置其向下滾動的值