style屬性很有用，但最大不足是無(wú)法通過(guò)它來(lái)提取到通過(guò)外部CSS設置的樣式信息，然而在jQuery中，這些都是非常的簡(jiǎn)單。
CSS-DOM技術(shù)簡(jiǎn)單來(lái)說(shuō)就是讀取和設置style對象的各種屬性。
可以直接利用css()方法獲取元素的樣式屬性，JQuery代碼如下：
1 | $("p").css("color"); //獲取p元素的樣式顏色 |
無(wú)論color屬性是外部CSS導入，還是直接拼接在HTML元素里（內聯(lián)），css()方法都可以獲取到屬性style里的其他屬性的值。
也可以直接利用css()方法設置某個(gè)元素的單個(gè)樣式，例如：
1 | $("p").css("color","red"); //設置p元素的樣式顏色為紅色 |
與attr()方法一樣，css()方法也可以同時(shí)設置多個(gè)樣式屬性，代碼如下：
2 | $("p").css({"fontSize":"30px","backgroundColor":"#ccc"})； |
如果值是數字，將會(huì )被自動(dòng)轉化為像素值。在css()方法中，如果屬性中帶有“-”符號，例如font-size和background-color屬性，如果在設置這些屬性的值的時(shí)候不帶引號，那么就要用駝峰式寫(xiě)法，比如上面的代碼，如果帶上了引號，既可以寫(xiě)成“font-size”，也可以寫(xiě)成“fontSize”?？傊ㄗh大家加上引號，養成良好的習慣。
對透明度的設置，可以直接使用opacity屬性，jQuery已經(jīng)處理好了兼容性的問(wèn)題，如下代碼所示，將p元素的透明度設置為半透明：
1 | $("p").css("opacity","0.5"); |
如果需要獲取某個(gè)元素的height屬性，則可以通過(guò)如下JQuery代碼實(shí)現：
1 | $(element).css("height"); |
在jQuery中還有另外一種方法也可以獲取元素的高度，即height()。它的作用是取得匹配元素當前計算的高度值(px)：
1 | $("p").height(); //獲取p元素的高度值 |
height()方法也能用來(lái)設置元素的高度，如果傳遞的值是一個(gè)數字，則默認單位為px。如果要用其他單位（例如em），則必須傳遞一個(gè)字符串，JQuery代碼如下：
1 | $("p").height("100px");//設置p元素的高度值為l00px |
2 | $("p").height("2em"); //設置p元素的高度值為2em |
- 在jQuery l.2版本以后的height()方法可以用來(lái)獲取window和document的高度。
- 兩者的區別是：css()方法獲取的高度值與樣式的設置有關(guān)，可能會(huì )得到“auto”，也可能得到”10px”之類(lèi)的字符串；而height()方法獲取的高度值則是元素在頁(yè)面中的實(shí)際高度，與樣式的設置無(wú)關(guān)，并且不帶單位。
與height()方法對應的還有一個(gè)width()方法，它可以取得匹配元素的寬度值(px)。
1 | $("p").width()；//獲取p元素的寬度值 |
同樣，width()方法也能用來(lái)設置元素的寬度。
1 | $("p").width("400px"); //設置p元素的寬度值為400px |
offset()方法
它的作用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個(gè)屬性，即top和left，它只對可見(jiàn)元素有效。例如用它米獲取p元素的的偏移量：
1 | var offset = $("p").offset(); //獲取p元素的offset() |
2 | var left = offset.left; //獲取左偏移 |
3 | var top = offset.top; //獲取右偏移 |
position()方法
它的作用是獲取元素相對于最近的一個(gè)position樣式屬性設置為relative或者absolute的祖父節點(diǎn)的相對偏移，與offset()一樣，它返回的對象也包括兩個(gè)屬性，即top和left。JQuery代碼如下：
1 | var position = $("p").position(); //獲取p元素的position() |
2 | var left = position.left; //獲取左偏移 |
3 | var top = position.top; //獲取右偏移 |
scrollTop()方法和scrollLeft()方法
這兩個(gè)方法的作用分別是獲取元素的滾動(dòng)條距頂端的距離和距左側的距離。例如使用下面的代碼獲取p元素的滾動(dòng)條距離：
2 | var scrollTop = $p.scrollTop(); //獲取元素的滾動(dòng)條距頂端的距離 |
3 | var scrollLeft = $p.scrollLeft()； //獲取元素的滾動(dòng)條距左側的距離 |
另外，可以為這兩個(gè)方法指定一個(gè)參數，控制元素的滾動(dòng)條滾動(dòng)到指定位置。例如使用如下代碼控制元素內的滾動(dòng)條滾動(dòng)到距頂端300和距左側300的位置：
1 | $("textarea").scrollTop (300); //元素的垂直滾動(dòng)條滾動(dòng)到指定的位置 |
2 | $("textarea").scrollLeft (300);//元素的橫向滾動(dòng)條滾動(dòng)到指定的位置 |
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
