画像の大きさ奇数

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の省略形です。誰かが何が起こっているか私に説明することはできますか？高さのプロパティが高さの属性と少し違うと思われます：彼らはそれを修正して、計算されたスタイルを返します。 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

風変わりは、あなたがそれをスポッティングしていたexacltyではありません。これは、セッターとしてheight属性を呼び出すと、imgタグ内にheight属性がというhtmlとなっています。私が知る限り、これはキャンバスにのみ使用される属性です。このhtmlタグとDOM値との間には接続がありません。

私は次の操作を行う場合は、次の

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

出力は100と100pxDOM上の高さが正しいことになります。ただし、htmlタグの属性をgetAttributeで検索すると、 "2000"が返されます。 CSSの高さ、height属性、高さDOM値：

EDIT

は、[OK]を、私はそれを

だと思います3異なるものがあります。

最も簡単なのはDOM値です。それは常にcssピクセルでimgの実際の高さを返します。 trhough cssを設定すると、css値に基づいています。属性を設定すると、その値から計算されます。

もう2つ。

両方ともimgディメンションを指定します。しかし、cssの値はHTML属性より優先されます。 これはw3 recommandationに記載されています。私は

インラインについて

を引用要素は、ブロックレベルは「インラインブロックは」これは

と述べています

通常の流れの中の要素と浮動置換要素を交換し、正常な流れの中の要素を置き換え置き換え

'height'と 'width'の両方に 'auto'の計算値があり、その要素も内在する高さを持つ場合、その内在する高さは 'hei ght '。

したがって、IMG（と思うインラインブロック要素ある人）の高さのCSSの値を使用しますが、これはautoに設定（と、それはデフォルトです）、それはintrinsic heightを使用している場合。それがhtml属性です。

ゲッターとしてstrange.heightを呼び出すと、DOM値が取得され、セッターとしてHTML属性が設定されます。

• CSS属性よりも優先
が
• DOMは、ここ（
• DOMは現実を反映している属性と同じ本物でなければなりません：

  EDIT2そして、もっと正確に答えるために、あなたは3つの基本的なルールを持っています高さ）

CSSと属性値の両方が指定されていて、異なる場合、3つのルールに従うことはできません。 DOM はと同じにする必要があります。ここにはCSSがある場合はできませんので、別の値を持っています。

ここでは、高さ属性の使用の良い説明はhttp://reference.sitepoint.com/html/imgです。