JQuery 获取元素宽度和高度

最新推荐文章于 2025-03-16 11:15:37 发布

__Zoe__

最新推荐文章于 2025-03-16 11:15:37 发布

阅读量1w

点赞数 8

分类专栏： JS基础

本文链接：https://blog.csdn.net/qq_24917475/article/details/92991546

版权

JS基础专栏收录该内容

35 篇文章

订阅专栏

获取浏览器窗口的高度和宽度：$(document).width()~ $(document).height()

width()：返回元素的宽度
height()：返回元素的高度
innerWidth()：返回元素的宽度（含内边距 padding）
innerHeight()：返回元素的高度（含内边距 padding）
outerWidth()：返回元素的宽度（含内边距 padding + 边框 border）
outerHeight()：返回元素的高度（含内边距 padding + 边框 border）
outerWidth(true)：返回元素的宽度（含内边距 padding + 边框 border + 外边距 margin）
outerHeight(true)：返回元素的高度（含内边距 padding + 边框 border + 外边距 margin）

JS代码：

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="inner height of div: " + $("#div1").innerHeight() + "</br>";
    txt+="outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="outer height of div: " + $("#div1").outerHeight() + "</br>";
    txt+="outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
    txt+="outer height of div (margin included): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
  });
});

html代码：

<div id="div1" style="height:100px; width:400px; padding:10px; margin:30px; border:5px solid blue; background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>

结果如图所示：
在这里插入图片描述