jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight的区别是什么？
我写了一些例子，看看有什么不同，但是他们显示宽度和高度相同的结果。
<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 – 维度
jQuery：高度，宽度，内部和外部
正如评论中提到的那样， 文档告诉你究竟有什么区别。 但总的来说：
- innerWidth / innerHeight – 包含填充但不包含边框
- outerWidth / outerHeight – 包括填充，边框和可选的边距
- 高度/宽度 – 元素高度（无填充，无边距，无边框）
-
宽度=获得宽度，
-
innerWidth =获取宽度+填充，
-
outerWidth =获取宽度+填充+边框和可选边距
如果你想testing添加一些填充，边距，边界到你的.test类，然后再试一次。
也阅读jQuery文档 …你需要的一切是非常多的
似乎有必要告诉关于值分配的内容，并比较jq中“width”参数的含义：（假设new_value是以px为单位定义的）
jqElement.css('width',new_value); jqElement.css({'width: <new_value>;'}); getElementById('element').style.width= new_value;
这三个指令并没有给出相同的效果：因为第一个jQuery指令定义了元素的内部宽度而不是“宽度”。 这是棘手的。
为了得到相同的效果，你必须先计算填充（假设var是填充），jquery获得和纯js（或css参数'width'）相同的结果的正确指令是：
jqElement.css('width',new_value+pads);
我们也可以注意到：
var w1 = jqElement.css('width'); var w2 = jqelement.width();
w1是内部宽度，而w2是宽度（css属性含义）差异，没有logging到JQ API文档中。
最好的祝福
Trebly
注：在我看来，这可以被视为一个错误JQ 1.12.4出去的方式应该是明确引入.css（'参数'，值）接受参数的列表，因为“参数”背后有各种含义，接受，有兴趣但必须始终明确。 对于这种情况：“内部宽度”不等于“宽度”。 我们可以用下面的语句把这个问题追踪到.width（value）的文档中：“注意，在现代浏览器中，CSS宽度属性不包括填充”
