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

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

• 類型：音頻處理大�。�1M語言：中文 評(píng)分：5.1
• 標(biāo)簽：

立即下載

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

修改CSS類

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

1.增加CSS類

addClass(classname|function(index, currentClass))

可用空格隔開需要增加的多個(gè)CSS類

2.除去CSS類

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

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

3.判斷是否有CSS類

hasClass(classname)

4.交互增刪CSS類

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

當(dāng)提供classname時(shí)則增刪指定的CSS類，當(dāng)不提供時(shí)則增刪所有擁有的CSS類。

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

修改CSS屬性

1.css(propertyName|propertyNames)

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

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

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

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

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

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

特殊的樣式函數(shù)

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

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

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

width(),height()

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

innerWidth(),innerHeight()

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

outerWidth(),outerHeight()

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

outerWidth(true),outerHeight(true)

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

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

2.設(shè)置長(zhǎng)寬值

height(value|function(index,height))

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

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

3.獲取位置

offset()

獲取對(duì)象集中第一個(gè)對(duì)象相對(duì)于document的位置

position()

獲取對(duì)象集中第一個(gè)對(duì)象相對(duì)于其parent的位置

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

4.設(shè)置位置

offset(coords|function(index,coords))

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

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

scrollLeft([value])

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

scrollTop([value])

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