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

如果你发现了它，那就很奇怪了。这是因为调用height属性作为setter是在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实际高度。如果设置了trhough css，它将基于css值，如果通过属性设置，它将从中计算。

现在是另外两个。

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

有关

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

据说

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

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

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

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

CSS优先于属性

DOM应与属性
相同
DOM反映了现实（这里是真正的高度）

如果CSS和属性值都指定且不同，则您无法遵循3条规则。关键是DOM 应该是相同的。这里不能有CSS，所以它有不同的值。

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

图像尺寸奇怪

1 个答案: