jQuery 中的宽度、内部宽度和外部宽度、高度、内部高度和外部高度有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17845027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
提问by zajke
I wrote some example to see what is the difference, but they display me same results for width and height.
我写了一些例子来看看有什么区别，但它们显示了相同的宽度和高度结果。
<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>
In this example you can see that they output same results. If anyone know what is the difference please show me appropriate answer.
在此示例中，您可以看到它们输出相同的结果。如果有人知道有什么区别，请告诉我适当的答案。
Thanks.
谢谢。
回答by zod
Did you see these examples? Looks similar to your question.
你看到这些例子了吗？看起来和你的问题很相似。
Working with widths and heights
回答by Default
As mentioned in a comment, the documentationtells you exactly what the differences are. But in summary:
正如评论中提到的，文档会准确地告诉您区别是什么。但总而言之：
- innerWidth / innerHeight - includes padding but not border
- outerWidth / outerHeight - includes padding, border, and optionally margin
- height / width - element height (no padding, no margin, no border)
- innerWidth / innerHeight - 包括填充但不包括边框
- 外宽度/外高度 - 包括填充、边框和可选的边距
- height / width - 元素高度（无填充、无边距、无边框）
回答by Chris G-Jones
width = get the width,
innerWidth = get width + padding,
outerWidth = get width + padding + border and optionally the margin
宽度 = 获取宽度，
innerWidth = 获取宽度 + 填充，
externalWidth = 获取宽度 + 填充 + 边框和可选的边距
If you want to test add some padding, margins, borders to your .test classes and try again.
如果你想测试添加一些填充、边距、边框到你的 .test 类，然后再试一次。
Also read up in the jQuery docs... Everything you need is pretty much there
还阅读了jQuery 文档......你需要的一切都在那里
回答by user161546
It seems necessary to tell about the values assignations and compare about the meaning of "width" parameter in jq : (assume that new_value is defined in px unit)
似乎有必要讲述值分配并比较 jq 中“宽度”参数的含义：（假设 new_value 以 px 为单位定义）
jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;
The three instructions doesn't give the same effect:because the first jquery instruction defines the innerwidthof the element and not the "width". This is tricky.
这三个指令不给相同的效果：因为第一jquery的指令定义的innerwidth的元件，而不是“宽度”的。这很棘手。
To get the same effect you must calculate the paddings before (assume var is pads), the right instruction for jquery to obtain the same result as pure js (or css parameter 'width') is :
要获得相同的效果，您必须先计算填充（假设 var 是 pads），jquery 获得与纯 js（或 css 参数“宽度”）相同结果的正确指令是：
jqElement.css('width',new_value+pads);
We can also note that for :
我们还可以注意到，对于：
var w1 = jqElement.css('width');
var w2 = jqelement.width();
w1 is the innerwidth, while w2 is the width (css attribute meaning) Difference which is not documented into JQ API documentation.
w1 是内宽，w2 是宽度（css 属性含义）的区别，JQ API 文档中没有记录。
Best regards
此致
Trebly
高音
Note : in my opinion this can be considered as a bug JQ 1.12.4 the way to go out should be to introduce definitively a list of accepted parameters for .css('parameter', value) because there are various meanings behind 'parameters' accepted, which have interest but must be always clear. For this case : 'innerwidth' will not mean the same as 'width'. We can find a track of this problem into documentation of .width(value) with the sentence : "Note that in modern browsers, the CSS width property does not include padding"
注意：在我看来这可以被认为是一个错误 JQ 1.12.4 出去的方法应该是明确地引入 .css('parameter', value) 的可接受参数列表，因为 'parameters' 背后有各种含义接受，有兴趣但必须始终明确。对于这种情况：“innerwidth”与“width”的含义不同。我们可以在 .width(value) 的文档中找到这个问题的踪迹：“注意，在现代浏览器中，CSS 宽度属性不包括填充”
回答by Alok Ranjan
Agree with all the answers given above.
Just to add in terms of window or browser prospects innerWidth/ innerheightincludes just window content area, nothing else, but
同意上面给出的所有答案。只是在窗口或浏览器前景方面添加innerWidth/ innerheight只包括窗口内容区域，没有别的，但是
outerWidth/ outerHeightincludes windows content area and in addition to this it also includes things like toolbars, scrollbars etc... and these values will be always equal or greater than innerWidth/innerHeight values.
outerWidth/ outerHeight包括 windows 内容区域，除此之外，它还包括工具栏、滚动条等……这些值将始终等于或大于 innerWidth/innerHeight 值。
Hope it helps more...
希望能帮到更多...
回答by GWorking
What I am seeing right now is that innerWidthincludes the whole content
我现在看到的是innerWidth包括全部内容
This is, if the window is 900pxand the content is 1200px(and there's a scroll)
这是，如果窗口是900px并且内容是1200px（并且有滚动）
innerWidthgives me1200pxouterWidthgives me900px
innerWidth给我1200pxouterWidth给我900px
Totally unexpected in my eyes
在我眼里完全出乎意料
*In my case the content is contained in a <iframe>
*就我而言，内容包含在 <iframe>
