style屬性很有用，但最大不足是無法通過它來提取到通過外部CSS設置的樣式信息，然而在jQuery中，這些都是非常的簡單。CSS-DOM技術簡單來說就是讀取和設置style對象的各種屬性。
效果演示
歡迎訪問簡明現代魔法圖書館
- 簡單易懂的PHP魔法
- 簡單易懂的JavaScript魔法
- 簡單易懂的JQuery魔法
可以直接利用css()方法獲取元素的樣式屬性，JQuery代碼如下：
1 |
$("p").css("color"); //獲取p元素的樣式顏色 |
無論color屬性是外部CSS導入，還是直接拼接在HTML元素裏（內聯），css()方法都可以獲取到屬性style裏的其他屬性的值。
也可以直接利用css()方法設置某個元素的單個樣式，例如：
1 |
$("p").css("color","red"); //設置p元素的樣式顏色爲紅色 |
與attr()方法一樣，css()方法也可以同時設置多個樣式屬性，代碼如下：
1 |
//同時設置字體大小和背景色 |
2 |
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"})； |
如果值是數字，將會被自動轉化爲像素值。在css()方法中，如果屬性中帶有“-”符號，例如font-size和background-color屬性，如果在設置這些屬性的值的時候不帶引號，那麼就要用駝峯式寫法，比如上面的代碼，如果帶上了引號，既可以寫成“font-size”，也可以寫成“fontSize”。總之建議大家加上引號，養成良好的習慣。
對透明度的設置，可以直接使用opacity屬性，jQuery已經處理好了兼容性的問題，如下代碼所示，將p元素的透明度設置爲半透明：
1 |
$("p").css("opacity","0.5"); |
如果需要獲取某個元素的height屬性，則可以通過如下JQuery代碼實現：
1 |
$(element).css("height"); |
在jQuery中還有另外一種方法也可以獲取元素的高度，即height()。它的作用是取得匹配元素當前計算的高度值(px)：
1 |
$("p").height(); //獲取p元素的高度值 |
height()方法也能用來設置元素的高度，如果傳遞的值是一個數字，則默認單位爲px。如果要用其他單位（例如em），則必須傳遞一個字符串，JQuery代碼如下：
1 |
$("p").height("100px"); //設置p元素的高度值爲l00px |
2 |
$("p").height("2em"); //設置p元素的高度值爲2em |
- 在jQuery l.2版本以後的height()方法可以用來獲取window和document的高度。
- 兩者的區別是：css()方法獲取的高度值與樣式的設置有關，可能會得到“auto”，也可能得到”10px”之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，並且不帶單位。
與height()方法對應的還有一個width()方法，它可以取得匹配元素的寬度值(px)。
1 |
$("p").width()； //獲取p元素的寬度值 |
同樣，width()方法也能用來設置元素的寬度。
1 |
$("p").width("400px"); //設置p元素的寬度值爲400px |
offset()方法
它的作用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。例如用它米獲取p元素的的偏移量：
1 |
var offset
= $("p").offset(); //獲取p元素的offset() |
2 |
var left
= offset.left; //獲取左偏移 |
3 |
var top
= offset.top; //獲取右偏移 |
position()方法
它的作用是獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset()一樣，它返回的對象也包括兩個屬性，即top和left。JQuery代碼如下：
1 |
var position
= $("p").position(); //獲取p元素的position() |
2 |
var left
= position.left; //獲取左偏移 |
3 |
var top
= position.top; //獲取右偏移 |
scrollTop()方法和scrollLeft()方法
這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離。例如使用下面的代碼獲取p元素的滾動條距離：
1 |
var $p
= $("p"); |
2 |
var scrollTop
= $p.scrollTop(); //獲取元素的滾動條距頂端的距離 |
3 |
var scrollLeft
= $p.scrollLeft()； //獲取元素的滾動條距左側的距離 |
另外，可以爲這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。例如使用如下代碼控制元素內的滾動條滾動到距頂端300和距左側300的位置：
1 |
$("textarea").scrollTop
(300); //元素的垂直滾動條滾動到指定的位置 |
2 |
$("textarea").scrollLeft
(300); //元素的橫向滾動條滾動到指定的位置 |
至此，已經將jQuery中常用的DOM操作（包括DOM Core，HTML-DOM和CSS-DOM）都已經介紹完畢。
