JQuery中的样式操作
生活随笔
收集整理的這篇文章主要介紹了
JQuery中的样式操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實現了。
.css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性
獲取方法：
1..css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
2..css( propertyNames )：傳遞一組數組，返回一個對象結果
設置方法：
1 .css(propertyName, value )：設置CSS
2..css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理
3..css( properties )：可以傳一個對象，同時設置多個樣式
注意：
1.瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
2..css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
3.當一個數只被作為值（value）的時候， jQuery會將其轉換為一個字符串，并添在字符串的結尾處添加px，例如 .css(“width”,50}) 與 .css(“width”,”50px”})一樣。
看例子吧；
<!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://libs.baidu.com/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').css("background-color") )</script><script type="text/javascript">//字體大小都會轉化成統px大小 em=>px$('p:eq(1)').text( $('.first').css("font-size"))</script><script type="text/javascript">//獲取尺寸，傳入CSS屬性組成的一個數組//{width: "60px", height: "60px"} var value = $('.first').css(['width','height']);//因為獲取的是一個對象，取到對應的值$('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').css("background-color","red")$('.fifth').css("background-color","yellow")</script><script type="text/javascript">//多種寫法設置字體大小$('.fourth').css("font-size","15px")$('.fifth').css("font-size","0.9em")</script><script type="text/javascript">//獲取到指定元素的寬度，在回調返回寬度值//通過處理這個value，重新設置新的寬度$('.sixth').css("width",function(index,value){value=value.split('px');//value帶單位，先分解return (Number(value[0])+50)+value[1];//返回一個新的值，在原有基礎上增加50})</script><script type="text/javascript">//合并設置,通過對象傳設置多個樣式$('.seventh').css({"font-size":"15px",'backgrongd-color':"#40E0D0","border":"1px solid red"})</script></body></html>執行結果：
總結
以上是生活随笔為你收集整理的JQuery中的样式操作的全部內容，希望文章能夠幫你解決所遇到的問題。
