144

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

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

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

谢谢。

4

6 回答 6

328

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

使用宽度和高度

在此处输入图像描述

jQuery - 尺寸

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

于 2013-07-24T21:25:45.360 回答
21

正如评论中提到的，文档会告诉您确切的区别是什么。但总而言之：

  • innerWidth / innerHeight - 包括填充但不包括边框
  • outerWidth / outerHeight - 包括填充、边框和可选的边距
  • height / width - 元素高度（无内边距、无边距、无边框）
于 2013-07-24T21:23:34.610 回答
5

  • 宽度 = 获取宽度，

  • innerWidth = 获取宽度 + 填充，

  • outerWidth = 获取宽度 + 填充 + 边框和可选的边距

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

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

于 2013-07-24T21:25:49.550 回答
3

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

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

这三个指令没有产生相同的效果： 因为第一个 jquery 指令定义了元素的内部宽度，而不是“宽度”。这很棘手。

要获得相同的效果，您必须在之前计算填充（假设 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 宽度属性不包括填充”

于 2017-04-28T16:20:26.993 回答
2

我现在看到的是innerWidth包括全部内容

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

  • innerWidth给我1200px
  • outerWidth给我900px

完全出乎我的意料

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

于 2019-12-12T11:15:11.957 回答
1

同意上面给出的所有答案。仅就窗口或浏览器前景而言，仅添加innerWidth/ innerheight窗口内容区域，仅此而已，但

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

希望对您有更多帮助...

于 2019-11-30T09:13:50.450 回答