在jQuery中,想要獲取或者設置某一個元素的寬度和高度,我們可以使用css()方法來實現。但是jQuery為我們提供了更多方便快速的方法,使得我們更加靈活地操作元素的寬度和高度。
在jQuery中,如果我們想要“獲取”或者“設置”元素的寬度,共有3種方法:
其實,這3種方法是根據盒子模型進行區分的。
對於這3種獲取或設置元素寬度的方法中,一般情況下我們只用到width()方法 ,對於其他兩種方法,了解一下即可。此外還要注意一點,只有width()方法可以用於window或document對象。
語法:
$().width() //獲取元素的寬度 $().width(n) //設置元素的寬度,n是一個整數,表示npx
說明:
width()方法和css("width")方法類似,不過width()方法獲得的寬度值不帶單位(僅僅是數字),而css("width")獲取的寬度值帶“px”作為單位,例如:
$().width(); //返回數字,例如100 $().css("width"); //返回字符串,例如“100px”
由於width()方法獲得的寬度值是一個數字,使得我們可以方便用來進行數值運算,這在元素定位、計算距離這些方面非常的有用。反而在這種時候,用css("width")就顯得很麻煩了。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #box1,#box2 { display:inline-block; width:100px; height:60px; border:1px solid gray; } </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn1").click(function () { //width()方法獲取元素的寬度 var a = $("#box1").width(); alert(a); }); $("#btn2").click(function () { //width()方法設置元素的寬度 $("#box2").width(50); }); }) </script> </head> <body> <div id="box1"></div> <div id="box2"></div><br /> 獲取第1個div的寬度:<input id="btn1" type="button" value="獲取" /><br /> 設置第2個div的寬度:<input id="btn2" type="button" value="設置" /> </body> </html>
在浏覽器預覽效果如下:
分析:
這裡要注意一下,使用width()方法對元素設置寬度時不要加單位,像width(50px)這種寫法是錯誤的,正常寫法應該是width(50)。
在jQuery中,如果我們想要“獲取”或者“設置”元素的高度,也有3種方法:
其實,這3種方法也是根據盒子模型進行區分的。
對於這3種獲取或設置元素高度的方法中,一般情況下我們只用到height()方法 ,對於其他兩種方法,同樣也是了解一下即可。此外還要注意一點,只有height()方法可以用於window或document對象。
語法:
$().height() //獲取元素的高度 $().height(n) //設置元素的高度,n是一個整數,表示npx
說明:
height()方法和width()方法的用法一樣,使用height()方法獲取元素的高度是一個數字(不帶單位)。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #box1,#box2 { display:inline-block; width:100px; height:60px; border:1px solid gray; } </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn1").click(function () { //height()方法獲取元素的高度 var a = $("#box1").height(); alert(a); }); $("#btn2").click(function () { //height()方法設置元素的高度 $("#box2").height(100); }); }) </script> </head> <body> <div id="box1"></div> <div id="box2"></div><br /> 獲取第1個div的高度:<input id="btn1" type="button" value="獲取" /><br /> 設置第2個div的高度:<input id="btn2" type="button" value="設置" /> </body> </html>
在浏覽器預覽效果如下:
分析:
總結1、對於元素的寬度和高度操作,我們一般情況下用width()和height()這2種方法就夠了,其他方法了解一下即可。
2、width()和height()使用方法相同,都可以實現2種效果:(1)獲取值;(2)設置值。這個很像我們之前學的html()、text()、val()。這一類既可以獲取值又可以設置值的方法在jQuery中很常見,大家對比理解並記憶一下。