圖片尺寸奇數

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

圖片尺寸奇數

回答

相關問題