jQuery 中的宽度、内部宽度和外部宽度、高度、内部高度和外部高度有什么区别
[英]What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
问题描述
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.谢谢。
6 个解决方案
解决方案1
312 已采纳 2013-07-24 21:25:45
Did you see these examples?你看到这些例子了吗？ Looks similar to your question.看起来和你的问题很相似。
Working with widths and heights 处理宽度和高度
解决方案2
19 2013-07-24 21:23:34
As mentioned in a comment, the documentation tells you exactly what the differences are.正如评论中提到的，文档会准确地告诉您区别是什么。 But in summary:但总而言之：
- innerWidth / innerHeight - includes padding but not border innerWidth / innerHeight - 包括填充但不包括边框
- outerWidth / outerHeight - includes padding, border, and optionally margin外宽度/外高度 - 包括填充、边框和可选的边距
- height / width - element height (no padding, no margin, no border) height / width - 元素高度（无填充、无边距、无边框）
解决方案3
4 2013-07-24 21:25:49
width = get the width,
宽度 = 获取宽度，innerWidth = get width + padding,
innerWidth = 获取宽度 + 填充，outerWidth = get width + padding + border and optionally the margin
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 文档......你需要的一切都在那里
解决方案4
3 2017-04-28 16:20:26
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 innerwidth of the element and not the "width".这三个指令不给相同的效果：因为第一jquery的指令定义的元素，而不是“宽度”的innerwidth。 This is tricky.这很棘手。
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 参数 'width'）相同结果的正确指令是：
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.注意：在我看来这可以被认为是一个错误 JQ 1.12.4 出去的方法应该是明确地引入 .css('parameter', value) 的可接受参数列表，因为 'parameters' 背后有各种含义接受，有兴趣但必须始终明确。 For this case : 'innerwidth' will not mean the same as 'width'.对于这种情况：“innerwidth”与“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"我们可以在 .width(value) 的文档中找到这个问题的踪迹：“请注意，在现代浏览器中，CSS 宽度属性不包括填充”
解决方案5
2 2019-12-12 11:15:11
What I am seeing right now is that innerWidth includes the whole content我现在看到的是innerWidth包括整个内容
This is, if the window is 900px and the content is 1200px (and there's a scroll)这是，如果窗口是900px ，内容是1200px （并且有滚动）
-
innerWidthgives me1200pxinnerWidth给了我1200px -
outerWidthgives me900pxouterWidth给了我900px
Totally unexpected in my eyes在我眼里完全出乎意料
*In my case the content is contained in a <iframe> *就我而言，内容包含在<iframe>
解决方案6
1 2019-11-30 09:13:50
Agree with all the answers given above.同意上面给出的所有答案。 Just to add in terms of window or browser prospects innerWidth/ innerheight includes just window content area, nothing else, but只是在窗口或浏览器前景方面添加innerWidth/ innerheight仅包括窗口内容区域，没有别的，但是
outerWidth/ outerHeight includes 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包括窗口内容区域，除此之外它还包括工具栏、滚动条等……这些值将始终等于或大于innerWidth/innerHeight 值。
Hope it helps more...希望能帮到更多...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.