jQuery 屬性與樣式(六)
通過JavaScript獲取dom元素上的style屬性,我們可以動(dòng)態(tài)的給元素賦予樣式屬性。在jQuery中我們要?jiǎng)討B(tài)的修改style屬性我們只要使用css()方法就可以實(shí)現(xiàn)了
css() 方法:獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的CSS屬性
獲取:
????css( propertyName ) :獲取匹配元素集合中的第一個(gè)元素的樣式屬性的計(jì)算值
????css( propertyNames ):傳遞一組數(shù)組,返回一個(gè)對(duì)象結(jié)果
設(shè)置:
??? css(propertyName, value ):設(shè)置CSS
????css( propertyName, function ):可以傳入一個(gè)回調(diào)函數(shù),返回取到對(duì)應(yīng)的值進(jìn)行處理
????css( properties ):可以傳一個(gè)對(duì)象,同時(shí)設(shè)置多個(gè)樣式
注:
瀏覽器屬性獲取方式不同,在獲取某些值的時(shí)候都jQuery采用統(tǒng)一的處理,比如顏色采用RBG,尺寸采用px
css()方法支持駝峰寫法與大小寫混搭的寫法,內(nèi)部做了容錯(cuò)的處理
當(dāng)一個(gè)數(shù)只被作為值(value)的時(shí)候, jQuery會(huì)將其轉(zhuǎn)換為一個(gè)字符串,并添在字符串的結(jié)尾處添加px,例如 .css("width",50}) 與 .css("width","50px"})一樣
下面我們來看一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文網(wǎng)</div> <script> $('div').css('color','red'); </script> </body> </html>
改變div 中內(nèi)容的樣式
下面我們來看一下,如果改變多個(gè)樣式呢,比如我要給div標(biāo)簽設(shè)置一個(gè)寬高,或者背景,那應(yīng)該怎么寫呢?
那接下來我們就開始寫這樣的一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文網(wǎng)</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>
看上面的代碼,我們就可以吧div 的寬高背景都設(shè)置成自己想要的樣式了
注意:在我們寫的時(shí)候,寫完了一個(gè)屬性需要用逗號(hào)結(jié)尾,寫到最后一個(gè)的時(shí)候我們可以不加逗號(hào)的