图像尺寸奇怪

Question

el = function(q) {return document.getElementById(q)};
el('strange').style.height = '100px'
el('strange').height = 2000
alert(el('strange').height) // 100?
alert(el('strange').getAttribute('height')) //2000? Wait.. What?

el 是 document.getElementById 的简写。有人可以解释一下发生了什么吗？我怀疑 height 属性与 height 属性略有不同：他们对其进行了修改，使其返回计算的样式。我不确定，因为 DOM 0 表示该属性应该与 getAttribute 相同，但锚的 href 属性与大多数浏览器中的 getAttribute 不匹配。并且：

https://developer.mozilla.org/en/DOM/HTMLImageElement

HTML：

<img id="strange" src="http://images.devshed.com/fcw/belts/fcw_forums.gif" />

Answer 1

如果你发现了它，这并不奇怪。它来自这样一个事实，即作为 setter 调用 height 属性是在 img 标记中创建 html 高度属性，据我所知，它是一个仅用于画布的属性。这个html标签和dom值没有任何联系。

如果我执行以下操作：

strange.style.height = '100px';
strange.height = 2000;
console.log(strange.height); // 100
console.log(strange.style.height); // 100px

输出将是100 和100px DOM 上的高度是正确的。但是，使用 getAttribute 搜索 html 标签中的属性，因此返回“2000”。

编辑

好吧，我想我明白了

有 3 种不同的东西： css 高度，height 属性，高度 DOM 值。

最简单的是 DOM 值。它总是以 css 像素返回 img 实际高度。如果通过css设置，则以css值为准，如果通过属性设置，则根据css值计算。

现在是另外两个。

它们都指定了 img 维度。但是 css 值优先于 HTML 属性。 这在w3 recommandation 中有说明。我引用

对于

内联替换元素、正常流程中的块级替换元素、正常流程中的“内联块”替换元素和浮动替换元素

据说

如果'height'和'width'都有计算值'auto'并且元素也有一个固有高度，那么这个固有高度就是'height'的使用值。

因此，img（我认为是 inline-block 元素）使用高度 css 值，但如果将其设置为 auto（这是默认值），它使用 intrinsic height。这就是 html 属性。

所以调用strange.height 作为getter 获取DOM 值，作为setter 调用它设置HTML 属性。

EDIT2 为了更准确地回答，您有 3 条基本规则：

• CSS 优于属性
• DOM 应该和属性一样
• DOM 反映现实（这里是真实高​​度）

如果 CSS 和属性值都被指定并且不同，你就不能遵循这 3 条规则。 关键是 DOM 应该是一样的。这里有CSS就不行，所以有不同的值。

作为旁注，这里对 height 属性的使用进行了很好的解释：http://reference.sitepoint.com/html/img。