图像尺寸奇怪

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 height 属性，据我所知，这是一个仅用于 canvas 的属性。这个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 高度、高度属性、高度 DOM 值。

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

现在另外两个。

它们都指定 img 尺寸。但 css 值优先于 HTML 属性。
w3 建议中对此进行了说明。我引用

的是

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

声明如下

如果“height”和“width”都具有“auto”的计算值，并且该元素也具有固有高度，则该固有高度是“height”的使用值。

因此，img（我认为是内联块元素）使用高度CSS值，但如果将其设置为auto（并且这是默认值），则它使用固有高度。这就是 html 属性。

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

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

• CSS 优先于属性
• 相同
• DOM 应该与属性DOM 反映现实

（这里是真实高​​度）你只是不能遵循 3 个规则如果 CSS 和属性值均已指定且不同。
重点是 DOM 应该 是相同的。这里如果有CSS就不可能这样，所以它有不同的值。

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