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

在这个例子中，您可以看到它们输出相同的结果。如果有人知道有什么不同，请给我适当的答案。

谢谢。

94003 次浏览
小开

正如在评论中提到的，文件会准确地告诉你它们之间的区别，但是总的来说:

  • InnerWidth/innerHeight-包括填充但不包括边框
  • OuterWidth/outerHeight-包括填充、边框和可选的边距
  • Height/width-元素的高度(无填充、无边距、无边框)
小开
最佳答案

你看到这些例子了吗? 看起来和你的问题很相似。

使用宽度和高度

enter image description here

JQuery-尺寸

JQuery: 高度、宽度、内部和外部

小开

  • 宽度 = 得到宽度,

  • 得到宽度 + 填充,

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

如果要测试，请在.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 是 pad) ，jquery 获得与纯 js (或 css 参数‘ width’)相同结果的正确指令是:

jqElement.css('width',new_value+pads);

我们还可以注意到:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

W1是内宽，而 W2是宽度(css 属性含义) 没有记录在 JQAPI 文档中的差异。

最好的问候

高音

注意: 在我看来，这可以被认为是一个 bug JQ 1.12.4 解决这个问题的方法应该是明确地引入一系列可以接受的参数。因为在接受的参数背后有各种各样的含义，这些含义很有意思，但必须始终清楚。 对于这种情况: “ innerwidth”与“ width”的意思不同。 我们可以在文档中找到这个问题的跟踪。Width (value)加上句子: “注意，在现代浏览器中，CSS width 属性不包括填充”

小开

同意上面给出的所有答案。 只是添加在窗口或浏览器方面的前景 innerWidth/ innerheight只包括窗口内容区域，没有别的，但

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

希望能帮到你。

小开

我现在看到的是 innerWidth包含了整个内容

也就是说，如果窗口是 900px，内容是 1200px(有一个滚动条)

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

完全出乎我的意料

* 在我的例子中，内容包含在 <iframe>中


提交答案