jQuery 之获取元素的尺寸（11）

客官°小女子只卖身不卖艺 2022-09-23 13:53 197阅读 0赞

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。  
jQuery 尺寸 方法  
jQuery 提供多个处理尺寸的重要方法：  
width()；height()；innerWidth()；innerHeight()；outerWidth()；outerHeight()  
===============================================  
jQuery Dimensions  
jQuery width() 和 height() 方法  
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。  
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。  
下面的例子返回指定的 <div> 元素的宽度和高度：  
实例

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        var txt="";
        txt+="Width of div: " + $("#div1").width() + "</br>";
        txt+="Height of div: " + $("#div1").height();
        $("#div1").html(txt);
      });
    });
    </script>
    </head>
    <body>
    <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>Display dimensions of div</button>
    <p>width() - returns the width of an element.</p>
    <p>height() - returns the height of an element.</p>
    </body>
    </html>

===============================================  
jQuery innerWidth() 和 innerHeight() 方法  
innerWidth() 方法返回元素的宽度（包括内边距）。  
innerHeight() 方法返回元素的高度（包括内边距）。  
下面的例子返回指定的 <div> 元素的 inner-width/height：  
实例  
$("button").click(function()\{  
var txt="";  
txt+="Inner width: " + $("\#div1").innerWidth() + "</br>";  
txt+="Inner height: " + $("\#div1").innerHeight();  
$("\#div1").html(txt);  
\});  
===============================================  
jQuery outerWidth() 和 outerHeight() 方法  
outerWidth() 方法返回元素的宽度（包括内边距和边框）。  
outerHeight() 方法返回元素的高度（包括内边距和边框）。  
下面的例子返回指定的 <div> 元素的 outer-width/height：  
实例  
$("button").click(function()\{  
var txt="";  
txt+="Outer width: " + $("\#div1").outerWidth() + "</br>";  
txt+="Outer height: " + $("\#div1").outerHeight();  
$("\#div1").html(txt);

\});  
===============================================

jQuery 的尺寸示意图

![img_jquerydim.gif][]

[img_jquerydim.gif]: /images/20220720/1a42669e0a914a05af32f78a99275517.png