jQuery中的width，innerWidth和outerWidth，height，innerHeight和outerHeight有什么区别答案

【问题标题】：What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQueryjQuery中的width，innerWidth和outerWidth，height，innerHeight和outerHeight有什么区别
【发布时间】：2013-07-24 13:54:06
【问题描述】：

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

<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>

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

谢谢。

【问题讨论】：

你看过 jQuery 文档吗？
尝试在<div> 中添加内边距、边框和边距，看看是否会产生不同的结果 ;)
api.jquery.com/category/dimensions 该页面描述了所有内容，如果您单击每个页面，则会提供更多信息。
我在谷歌上搜索过，但没有一个答案能满足我的期望。
@BradM - 没有人。但是“宽度，innerWidth，outerWidth jquery之间的差异”的结果没有告诉我要点。

标签： javascript jquery css dom styles

【解决方案1】：

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

这是，如果窗口是900px，内容是1200px（并且有滚动条）

innerWidth 给我1200px
outerWidth 给我900px

在我看来完全出乎意料

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

【讨论】：

【解决方案2】：

同意上面给出的所有答案。仅添加窗口或浏览器前景innerWidth/ innerheight 仅包括窗口内容区域，没有其他内容，但是

outerWidth/ outerHeight 包括 windows 内容区域，除此之外它还包括工具栏、滚动条等...并且这些值将始终等于或大于 innerWidth/innerHeight 值。

希望对您有所帮助...

【讨论】：

【解决方案3】：

似乎有必要说明值分配并比较 jq 中“宽度”参数的含义：（假设new_value是以px为单位定义的）

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

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

为了得到同样的效果，你必须先计算paddings（假设var是pads），jquery获得与纯js相同的结果（或css参数'width'）的正确指令是：

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

我们还可以注意到：

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

w1 是内部宽度，而 w2是宽度（css属性含义） JQ API 文档中未记录的差异。

最好的问候

高音

注意：在我看来，这可以被视为 JQ 1.12.4 的错误走出去的方法应该是明确地引入 .css('parameter', value) 的接受参数列表，因为接受的 'parameters' 背后有各种含义，有兴趣但必须始终清楚。对于这种情况：“innerwidth”与“width”的含义不同。我们可以在 .width(value) 的文档中找到这个问题的轨迹：“请注意，在现代浏览器中，CSS 宽度属性不包括填充”

【讨论】：

添加扭曲：.css('width') 与.outerWidth() 相同（即包括边框和内边距），box-sizing: border-box;。

【解决方案4】：

正如评论中提到的，the documentation 准确地告诉您有什么区别。但总而言之：

innerWidth / innerHeight - 包括填充但不包括边框
outerWidth / outerHeight - 包括填充、边框和可选的边距
height / width - 元素高度（无内边距、无边距、无边框）

【讨论】：

【解决方案5】：

width = 获取宽度，
innerWidth = 获取宽度 + 内边距，
outerWidth = 获取宽度 + 填充 + 边框和可选的边距

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

还阅读了 jQuery 文档...您需要的一切都在那里

【讨论】：

【解决方案6】：

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

Working with widths and heights

jQuery - Dimensions

jQuery: height, width, inner and outer

【讨论】：

最佳答案
我刚刚在下面发布了一个答案，因为现在我看到您的描述未推断出这两个选项之间的不同行为
innerWidth 比width 的内部要小，看图。