jQuery中width、innerWidth和outerWidth以及height、innerHeight和outerHeight有什么区别？

Question

jQuery中width、innerWidth和outerWidth以及height、innerHeight和outerHeight有什么区别？

150

我写了一些例子来看看它们的区别，但是它们对于宽度和高度显示相同的结果。

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

在这个示例中，您可以看到它们输出相同的结果。如果有人知道区别，请给我适当的答案。

谢谢。

- zajke

8

你有没有查看过jQuery文档？ - Brad M

1

尝试为您的<div>添加填充、边框和外边距，看看是否会产生不同的结果 ;) - Niet the Dark Absol

4

这个页面描述了所有维度相关的内容，如果你点击每一个维度会有更多的信息。 - JClaspill

我在谷歌上搜索过，但没有一个答案能满足我的期望。 - zajke

1

@BradM - 没有啊，但是搜索“width、innerWidth、outerWidth jquery之间的区别”得到的结果都没有本质上的解释。 - zajke

第一和第二个结果来自stackoverflow。在这个问题中，我详细解释了我需要什么，而且我没有找到类似的问题。我并没有说这里没有类似的问题，但我想详细定义我的问题，这样有人可以从中受益。谢谢。 - zajke

6个回答

24

如评论所述，文档会准确告诉您它们的区别。总体来说：

innerWidth / innerHeight - 包括填充但不包括边框
outerWidth / outerHeight - 包括填充、边框和可选的外边距
height / width - 元素高度 (没有填充、边距和边框)

- Default

6

width = 获取宽度，
innerWidth = 获取宽度 + padding，
outerWidth = 获取宽度 + padding + border，以及可选的margin

如果您想测试，请为您的.test类添加一些填充、边距和边框，然后再试一次。

同时阅读jQuery文档... 您需要的几乎都在那里了。

- Chris G-Jones

5

我现在看到的是，innerWidth 包含了整个内容

也就是说，如果窗口大小为 900px，而内容大小为 1200px（并且有滚动条）

innerWidth 显示为 1200px
outerWidth 显示为 900px

这对我来说完全出乎意料

*在我的情况下，内容包含在一个 <iframe> 中

- GWorking

3

似乎有必要讲一下在jq中"width"参数的赋值和比较的含义：（假设new_value是以px为单位定义的）

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

这三个指令效果不同： 因为第一个jquery指令定义了元素的innerwidth而不是"width"。这很棘手。

要获得相同的效果，您必须先计算填充（假设变量是pads），正确的jquery指令以获得与纯js（或css参数'width'）相同的结果是：

jqElement.css('width',new_value+pads);

我们还可以注意到，对于以下情况：

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1是innerwidth，w2是CSS属性中的宽度（意思）两者有区别，但未在JQ API文档中记录。

祝好

Trebly

注意：我认为这可以被视为JQ 1.12.4的一个bug。解决问题的方法应该是引入一份接受参数列表以供 .css('parameter', value) 使用，因为不同的“parameters”有着不同的含义和用途，必须保持清晰易懂。就这个例子而言，'innerwidth'和'width'所表示的不是同一个值。我们可以在.width(value)的文档中找到与此问题相关的线索，其中提到“在现代浏览器中，CSS宽度属性并不包括填充部分”。

- user161546

额外的提示：当 box-sizing: border-box; 时，.css('width') 和 .outerWidth() 是相同的（也就是说，它包括边框和填充）。 - Bob Stein

1

同意以上所有答案。就窗口或浏览器方面而言，innerWidth/innerheight仅包括窗口内容区域，不包括其他任何内容，但是outerWidth/outerHeight包括窗口内容区域以及工具栏、滚动条等内容...这些值始终大于或等于innerWidth/innerHeight的值。希望这可以更好地帮助你...

- Alok Ranjan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zod · Accepted Answer

你看到这些例子了吗？看起来和你的问题很相似。

宽度和高度操作

图片描述

jQuery - 尺寸

jQuery：高度、宽度、内部和外部