jQuery尺寸width() height() innerWidth() innerHeight() outerWidth() outerHeight()Document&Window-CSDN博客

本文链接：https://blog.csdn.net/mus123/article/details/104346789

本文深入讲解了使用jQuery获取元素尺寸的各种方法，包括width(), height(), innerWidth(), innerHeight(), outerWidth()和outerHeight()等函数的用法及区别，通过实例演示如何获取div元素的不同尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="jquery.js">
    </script>
    <script>
        $(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) + "</br>";
                txt += "Document width/height: " + $(document).width();
                txt += "x" + $(document).height() + "</br>";
                txt += "Window width/height: " + $(window).width();
                txt += "x" + $(window).height();
                $("#div1").html(txt);
            });
        });
    </script>
</head>

<body>

    <div id="div1" style="height:200px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 的尺寸</button><a>height:200px--width:500px--padding--10px--margin:3px--border:1px</a>
    <p>width() - 返回元素的宽度。</p>
    <p>height() - 返回元素的高度。</p>
    <p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
    <p>innerHeight() - 返回元素的高度（包括内边距）。</p>
    <p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
    <p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
    <p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
    <p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>

</body>

</html>

在这里插入图片描述