图片尺寸奇数

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的简写。有人能解释我发生了什么事吗？我怀疑高度属性与高度属性略有不同：他们修改它，以便它返回计算的样式。我不确定，因为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" />

来源

2011-08-30 bopjesvla

元素是否隐藏？ :) – Blindy

不，我会添加这个例子的html ... – bopjesvla

古怪不exaclty被你察觉它。它来自这样一个事实，即作为setter调用height属性在img标签中创建一个高度属性，据我所知，它是一个仅用于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值，如果通过属性设置，它将从那里计算。

现在另外两个。

它们都指定img尺寸。但是，CSS的优先级高于HTML属性。这在w3 recommandation中说明。我引用

对于

内联替换元素，块级替换正常流动的元素， 'inline-block的' 替换正常流动的元素和浮动替换元素

它指出，

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

因此，IMG（谁是inline-block的元素，我认为）用高度的CSS值，但如果这个人是设置为自动（和它的默认值）它使用intrinsic height。这就是html属性。

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

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

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

如果CSS和属性值都指定并且不同，那么您不能遵循3条规则。关键是DOM 应该是一样的。这里不可能有CSS，所以它有不同的价值。

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

来源

2011-08-30 16:38:41

不，这不是真的，如果你没有设置样式（如果你删除脚本的第一行），图像将是2000px高... – bopjesvla

什么是返回strange.height和strange.style.height？他们都有2000的价值？ –

不，strange.style.height返回'100px'（string），strange.height返回100（long），strange.getAttribute（'height'）返回'2000'（string） – bopjesvla

图片尺寸奇数

回答

相关问题