image dimensions oddity

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 is a shorthand of document.getElementById. Can someone explain me what's going on? I sus开发者_如何学Pythonpect that the height property is slightly different than the height attribute: they modified it so it returns the computed style. I'm not sure, because DOM 0 says that the property should be the same as the getAttribute, but the href property of an anchor doesn't match with the getAttribute in most browsers. And:

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

The HTML:

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

The oddity isn't exaclty were you're spotting it. It comes from the fact that the call to the height attribute as a setter is creating a html height attribute in the img tag, and as far as I know, it's an attribute used only for canvas. There is no connection between this html tag and the dom value.

If i do the following:

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

the output will be 100 and 100px the height on the DOM is correct. However, using the getAttribute search for the attributes in the html tag, therefor returning "2000".

EDIT

Ok i think i got it

There are 3 different stuff: The css height, the height attribute, the height DOM value.

The easiest is the DOM value. It always return the img real height in css pixel. If set trhough css, it will be based on the css value, if set through attribute, it will be calculated from that.

Now the two other.

They both specify the img dimension. But the css value as precedence over the HTML attribute. This is stated in the w3 recommandation. I quote

For

Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

It's stated that

If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.

Therefore, img (who are inline-block element I think) use the height css value, but if this one is set to auto (and it's the default) it uses the intrinsic height. And that is the html attribute.

So calling strange.height as a getter gets the DOM value, and as a setter, it sets the HTML attribute.

EDIT2 And to answer more exactly, you have 3 basic rules:

• CSS prevails over attribute
• DOM should be the same as attribute
• DOM reflects the reality (here the real height)

You just can't follow the 3 rules if both CSS and attribute value are specified and differ. The point is DOM should be the same. Here it can't be if there is CSS, so it has a different value.

As a side note, a nice explanation of the use of the height attribute here: http://reference.sitepoint.com/html/img .