JQuery操作元素的style屬性


可以直接利用css()方法獲取元素的樣式屬性:

JQuery代碼如下:

$("p").css("color");  //獲取p元素的樣式顏色
無論color屬性是外部CSS導入,還是直接拼接在HTML元素里(內聯),css()方法都可以獲取到屬性style里的其他屬性的值。

也可以直接利用css()方法設置某個元素的單個樣式,例如:

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

與attr()方法一樣,css()方法也可以同時設置多個樣式屬性,代碼如下:

//同時設置字體大小和背景色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
如果值是數字,將會被自動轉化為像素值。
在css()方法中,如果屬性中帶有“
-”符號,例如font-size和background-color屬性,如果在設置這些屬性的值的時候不帶引號,那么就要用駝峰式寫法,
比如上面的代碼,如果帶上了引號,既可以寫成“font-size”,也可以寫成“fontSize”。總之建議大家加上引號,養成良好的習慣。
對透明度的設置,可以直接使用opacity屬性,jQuery已經處理好了兼容性的問題,如下代碼所示,將p元素的透明度設置為半透明:
$("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

1.在jQuery l.2版本以后的height()方法可以用來獲取window和document的高度。
2.兩者的區別是: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); //元素的橫向滾動條滾動到指定的位置

至此


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM