jQuery中width，innerWidth和externalWidth，height，innerHeight和externalHeight之间的区别是什么

123

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

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

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

谢谢。

— 扎克
source

8

您是否看过jQuery文档？

— 布拉德M

1

尝试为您的页面添加padding，border和margin <div>，看看是否能带来不同的结果；）

— Niet the Dark Absol 2013年

4

api.jquery.com/category/dimensions 该页面描述了所有内容，如果单击每个，则将提供更多信息。

— JClaspill

我已经在Google中搜索过，但没有一个答案能满足我的期望。

— zajke

@BradM-没有人。但是结果“宽度，innerWidth，outerWidth jQuery之间的差异”在本质上并没有告诉我。

— zajke

281

您看到这些例子了吗？看起来类似于您的问题。

使用宽度和高度

在此处输入图片说明

jQuery-尺寸

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

— 佐德
source

1

有史以来最好的答案

— 本杰明·

我现在在下面发布了一个答案，因为现在我看到这两个选项之间的行为不同，您的描述未

— 得出这些结论

16

正如评论中提到的，文档准确地告诉您它们之间的区别。但总而言之：

innerWidth / innerHeight-包含填充但不包含边框
outsideWidth / externalHeight-包括填充，边框和可选的边距
高度/宽度-元素高度（无填充，无边距，无边框）

— 默认
source

4

width =获取宽度，
innerWidth =获取宽度+填充，
outsideWidth =获取宽度+填充+边框以及可选的边距

如果要测试，请在.test类中添加一些填充，边距，边框，然后重试。

也可以在jQuery文档中阅读……您所需的一切几乎都在那里

— 克里斯·琼斯
source

2

似乎有必要告诉值分配并比较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 width属性不包含填充”

— 用户名
source

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

— 鲍勃·斯坦

0

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

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

希望它能帮助更多...

— 阿罗克·兰詹（Alok Ranjan）
source

0

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

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

innerWidth 给我 1200px
outerWidth 给我 900px

在我眼中完全出乎意料

*就我而言，内容包含在 <iframe>

— 工作
source