亚洲图片欧美伊人,久草热线视频97精品,天天澡狠狠澡夜

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

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

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

獲?。?/strong>

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

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

設置：

.css(propertyName, value )：設置CSS

.css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理

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

注意事項：

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

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

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

任務

在代碼編輯器中第21行填寫相應代碼

css("background-color")

在代碼編輯器中第27行填寫相應代碼

css("font-size")

在代碼編輯器中第33行填寫相應代碼

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

在代碼編輯器中第47 48行填寫相應代碼

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

在代碼編輯器中第53 54行填寫相應代碼

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

在代碼編輯器中第61行填寫相應代碼

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

在代碼編輯器中第67行填寫相應代碼

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://www.xianlaiwan.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) //顏色都會轉化成統一的rgb標示 $('p:eq(0)').text( $('.first').? ) </script> <script type="text/javascript"> //字體大小都會轉化成統px大小 em=>px $('p:eq(1)').text( $('.first').? ) </script> <script type="text/javascript"> //獲取尺寸，傳入CSS屬性組成的一個數組 //{width: "60px", height: "60px"} var value = $('.first').?; //因為獲取的是一個對象，取到對應的值 $('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height ) </script> </br></br></br> <h3>設置css屬性</h3> <div class="fourth">設置顏色設置文字尺寸</div> <div class="fifth">設置顏色設置文字尺寸</div> <div class="sixth">通過回調設置新的值</div> <div class="seventh">同時設置多少個樣式</div> <script type="text/javascript"> //多種寫法設置顏色 $('.fourth').? $('.fifth').? </script> <script type="text/javascript"> //多種寫法設置字體大小 $('.fourth').? $('.fifth').? </script> <script type="text/javascript"> //獲取到指定元素的寬度，在回調返回寬度值 //通過處理這個value，重新設置新的寬度 $('.sixth').? </script> <script type="text/javascript"> //合并設置,通過對象傳設置多個樣式 $('.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; }

提交
自動運行
重置代碼

提問題

請輸入問題內容...

提交

其他問答

查看更多本節問答

寫筆記

公開筆記
提交

||

全屏運行結果

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

熱搜

最近搜索清空

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

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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