宅男噜噜噜66网站,老熟妇2,九九日精品

jQuery的屬性與樣式之樣式操作.css()

通過JavaScript獲取dom元素上的style屬性，我們可以動態(tài)的給元素賦予樣式屬性。在jQuery中我們要動態(tài)的修改style屬性我們只要使用css()方法就可以實(shí)現(xiàn)了

.css() 方法：獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的CSS屬性

獲?。?/strong>

.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計(jì)算值

.css( propertyNames )：傳遞一組數(shù)組，返回一個對象結(jié)果

設(shè)置：

.css(propertyName, value )：設(shè)置CSS

.css( propertyName, function )：可以傳入一個回調(diào)函數(shù)，返回取到對應(yīng)的值進(jìn)行處理

.css( properties )：可以傳一個對象，同時(shí)設(shè)置多個樣式

注意事項(xiàng)：

瀏覽器屬性獲取方式不同，在獲取某些值的時(shí)候都jQuery采用統(tǒng)一的處理，比如顏色采用RBG，尺寸采用px

.css()方法支持駝峰寫法與大小寫混搭的寫法，內(nèi)部做了容錯的處理

當(dāng)一個數(shù)只被作為值（value）的時(shí)候， jQuery會將其轉(zhuǎn)換為一個字符串，并添在字符串的結(jié)尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣

任務(wù)

在代碼編輯器中第21行填寫相應(yīng)代碼

css("background-color")

在代碼編輯器中第27行填寫相應(yīng)代碼

css("font-size")

在代碼編輯器中第33行填寫相應(yīng)代碼

css(['width','height'])

在代碼編輯器中第47 48行填寫相應(yīng)代碼

css("background-color","red") css("backgroundColor","yellow")

在代碼編輯器中第53 54行填寫相應(yīng)代碼

css("font-size","15px") css("fontSize","0.9em")

在代碼編輯器中第61行填寫相應(yīng)代碼

css("width",function(index,value){ //value帶單位，先分解 value = value.split('px'); //返回一個新的值，在原有的值上，增加50px return (Number(value[0]) + 50) + value[1]; })

在代碼編輯器中第67行填寫相應(yīng)代碼

css({ 'font-size' :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" })

?不會了怎么辦

||

index.html

imooc.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>獲取css屬性</h3> <div class="first">獲取顏色</div> <p></p> <div class="second">獲取文字尺寸</div> <p></p> <div class="third">獲取寬高尺寸</div> <p></p> <script type="text/javascript"> //background-color:blue; => rgb(0, 0, 255) //顏色都會轉(zhuǎn)化成統(tǒng)一的rgb標(biāo)示 $('p:eq(0)').text( $('.first').? ) </script> <script type="text/javascript"> //字體大小都會轉(zhuǎn)化成統(tǒng)px大小 em=>px $('p:eq(1)').text( $('.first').? ) </script> <script type="text/javascript"> //獲取尺寸，傳入CSS屬性組成的一個數(shù)組 //{width: "60px", height: "60px"} var value = $('.first').?; //因?yàn)楂@取的是一個對象，取到對應(yīng)的值 $('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height ) </script> </br></br></br> <h3>設(shè)置css屬性</h3> <div class="fourth">設(shè)置顏色設(shè)置文字尺寸</div> <div class="fifth">設(shè)置顏色設(shè)置文字尺寸</div> <div class="sixth">通過回調(diào)設(shè)置新的值</div> <div class="seventh">同時(shí)設(shè)置多少個樣式</div> <script type="text/javascript"> //多種寫法設(shè)置顏色 $('.fourth').? $('.fifth').? </script> <script type="text/javascript"> //多種寫法設(shè)置字體大小 $('.fourth').? $('.fifth').? </script> <script type="text/javascript"> //獲取到指定元素的寬度，在回調(diào)返回寬度值 //通過處理這個value，重新設(shè)置新的寬度 $('.sixth').? </script> <script type="text/javascript"> //合并設(shè)置,通過對象傳設(shè)置多個樣式 $('.seventh').? </script> </body> </html>

div { width: 60px; height: 60px; margin: 5px; float: left; font-size: 0.8em; background: #40E0D0 } .first{ background-color:lightSkyBlue; } .second{ background-color: #ccc; color: red; font-size: 1.2em; } .third{ background-color:yellow; } .sixth{ font-size: 12px; }

提交
自動運(yùn)行
重置代碼

提問題

請輸入問題內(nèi)容...

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記
提交

||

全屏運(yùn)行結(jié)果

請驗(yàn)證，完成請求

由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

3-7 jQuery的屬性與樣式之樣式操作.css()

jQuery的屬性與樣式之樣式操作.css()

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

3-7 jQuery的屬性與樣式之樣式操作.css()

熱搜

最近搜索清空

jQuery的屬性與樣式之樣式操作.css()

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～