用JQuery操做元素的style屬性

style屬性頗有用，但最大不足是沒法經過它來提取到經過外部CSS設置的樣式信息，然而在jQuery中，這些都是很是的簡單。CSS-DOM技術簡單來講就是讀取和設置style對象的各類屬性。css

效果演示

歡迎訪問簡明現代魔法圖書館字體

簡單易懂的PHP魔法
簡單易懂的JavaScript魔法
簡單易懂的JQuery魔法

能夠直接利用css()方法獲取元素的樣式屬性，JQuery代碼以下：spa

$("p").css("color"); //獲取p元素的樣式顏色code

不管color屬性是外部CSS導入，仍是直接拼接在HTML元素裏（內聯），css()方法均可以獲取到屬性style裏的其餘屬性的值。對象

也能夠直接利用css()方法設置某個元素的單個樣式，例如：ip

$("p").css("color","red"); //設置p元素的樣式顏色爲紅色ci

與attr()方法同樣，css()方法也能夠同時設置多個樣式屬性，代碼以下：element

 
         //同時設置字體大小和背景色   
        
         $("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"})；

若是值是數字，將會被自動轉化爲像素值。在css()方法中，若是屬性中帶有「-」符號，例如font-size和background-color屬性，若是在設置這些屬性的值的時候不帶引號，那麼就要用駝峯式寫法，好比上面的代碼，若是帶上了引號，既能夠寫成「font-size」，也能夠寫成「fontSize」。總之建議你們加上引號，養成良好的習慣。字符串

對透明度的設置，能夠直接使用opacity屬性，jQuery已經處理好了兼容性的問題，以下代碼所示，將p元素的透明度設置爲半透明：input

$("p").css("opacity","0.5");

若是須要獲取某個元素的height屬性，則能夠經過以下JQuery代碼實現：

$(element).css("height");

在jQuery中還有另一種方法也能夠獲取元素的高度，即height()。它的做用是取得匹配元素當前計算的高度值(px)：

$("p").height(); //獲取p元素的高度值

height()方法也能用來設置元素的高度，若是傳遞的值是一個數字，則默認單位爲px。若是要用其餘單位（例如em），則必須傳遞一個字符串，JQuery代碼以下：

 
         $("p").height("100px"); //設置p元素的高度值爲l00px   
        
         $("p").height("2em");   //設置p元素的高度值爲2em

在jQuery l.2版本之後的height()方法能夠用來獲取window和document的高度。
二者的區別是：css()方法獲取的高度值與樣式的設置有關，可能會獲得「auto」，也可能獲得」10px」之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，而且不帶單位。

與height()方法對應的還有一個width()方法，它能夠取得匹配元素的寬度值(px)。

$("p").width()； //獲取p元素的寬度值

一樣，width()方法也能用來設置元素的寬度。

$("p").width("400px"); //設置p元素的寬度值爲400px

offset()方法

它的做用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。例如用它米獲取p元素的的偏移量：

 
         var offset = $("p").offset();   //獲取p元素的offset()   
        
         var left = offset.left;   //獲取左偏移   
        
         var top =  offset.top;    //獲取右偏移

position()方法

它的做用是獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset()同樣，它返回的對象也包括兩個屬性，即top和left。JQuery代碼以下：

 
         var position = $("p").position();    //獲取p元素的position()   
        
         var left = position.left;    //獲取左偏移   
        
         var top = position.top;    //獲取右偏移

scrollTop()方法和scrollLeft()方法

這兩個方法的做用分別是獲取元素的滾動條距頂端的距離和距左側的距離。例如使用下面的代碼獲取p元素的滾動條距離：

 
         var $p =  $("p");   
        
         var scrollTop = $p.scrollTop();    //獲取元素的滾動條距頂端的距離   
        
         var scrollLeft = $p.scrollLeft()；    //獲取元素的滾動條距左側的距離

另外，能夠爲這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。例如使用以下代碼控制元素內的滾動條滾動到距頂端300和距左側300的位置：

 
         $("textarea").scrollTop (300);    //元素的垂直滾動條滾動到指定的位置      
        
         $("textarea").scrollLeft (300); //元素的橫向滾動條滾動到指定的位置