所謂CSS-DOM操作就是讀取和設置style對象的各種屬性，style屬性很強大，但是美中不足的是無法通過它來提取到通過外部CSS設置的樣式信息，然而在家jQuery中，這些就可以通過css()方法實現了。
和之前一樣，在開始前，我們先在html中寫出接下來操作要用到的DOM結構樹：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <style type="text/css"> #Id1{width:200px;height:100px;border:1px solid red;color:red;} #Id2{width:200px;height:100px;margin:50px;padding:20px;border:1px solid red;} </style> </head> <body> <div id="Id1">我是第一個DIV,我的id是Id1</div> <div id="Id2" style="color:#00ffff;">我是第二個DIV,我的id是Id2</div> </body> </html>
css()
通過css()方法，我們既可以獲取外部CSS導入的樣式，也能獲取html內聯樣式。
<script>
var color1 = $("#Id1").css("color");
var color2 = $("#Id2").css("color");
console.log(color1);
console.log(color2);
</script>
也可以直接使用css()方法設置某個元素的的樣式。
<script> $("#Id1").css("color","#000"); $("#Id2").css({fontSize:"24px","backgroundColor":"#888","font-weight":"bold"}); </script>
從上面的例子中可以看出，css()即可以設置單個樣式，也可以同時設置多個樣式屬性，需要注意的是，在css()方法中，如果屬性中帶有“-”符號，例如font-size和background-color屬性，如果在設置這些屬性的值的時候不帶引號，那么就需要用駝峰式寫法，如果帶上了引號，既可以使用駝峰式，也可以使用帶“-”的方式，但是，為了養成良好的習慣，自然是帶上引號比較好了。
寬度和高度
通過對css()方法的學習，我們知道，可以使用該方法獲取和設置元素的寬高。
<script>
var width = $("#Id1").css("width");
var height = $("#Id2").css("height");
console.log(width);
console.log(height);
</script>
除此之外，在jQuery中，還有另外一種方法也可以獲取元素的寬高，那就是width()和height()，這兩個方法的作用是獲取匹配元素當前計算的高度值，也就是說，css()獲取的寬高與樣式設置有關，可能會得到“auto”，也可能是“100px”這樣的字符串，而width()和height()獲取的寬高則是元素在頁面中的實際寬高，與樣式的設置無關，並且不帶單位。
<script>
var width = $("#Id1").width();
var height = $("#Id2").height();
console.log(width);
console.log(height);
</script>
既然可以不帶參數獲取值，自然就可以傳參數設置值了，用這兩個方法設置寬高時，如果傳遞的值是一個數字，則默認單位為px，如果要用其他單位，則必須傳遞一個字符串。
在盒子模型中，元素的寬高有三種，分別是content-box、padding-box、border-box里的三種寬高，
<script> console.log($('#Id2').height()); console.log($('#Id2').innerHeight()); console.log($('#Id2').outerHeight()); </script>
除了上面的方法外，jQuery中還有以下幾個常用的方法。
offset()
offset()方法能夠獲取和設置元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，還方法只對可見元素有效。
<script> newPos=new Object(); newPos.left="50"; newPos.top="20"; $("#Id1").offset(newPos); console.log($('#Id2').offset().left)； </script>
position()
position()的作用是獲取元素相對於最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移，它的返回對象也是包括top和left兩個屬性。
<script> console.log($('#Id2').offset().left); console.log($('#Id2').offset().top); </script>
scrollTop()和scrollLeft()
這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離。當傳入參數是，就是控制元素的滾動條滾動到指定位置。