在顯示器的IE中獲取圖像高度：無圖像？

Question

我有設置display:none圖像display:none 。 我使用javascript（ document.getElementById('elem').height ）來獲取這些圖像的高度/寬度。

這適用於其他瀏覽器，但IE報告高度為0（可能是因為它的顯示設置為無 - 因為當我刪除display：none時，正確報告高度）。 我嘗試將圖像包裝在div中並將div的顯示設置為none而不是圖像 - 但這也不起作用。

這個典型的工作是什么？

Answer 1

如果您對圖像本身的大小感興趣，除了在html中設置的任何樣式或屬性之外，您可以使用相同的src測量新圖像。

如果您只測試包含的圖像，它不會向文檔的html或樣式表添加任何內容，甚至不會添加到document.images.length。

var  im=new Image();
im.src=element.src;
return [im.src,  im.width, im.height];

Answer 2

你可以使用visibility: hidden; ，也許與position:absolute相結合position:absolute也可以防止“閃爍”，你將在讀出高度后將其刪除。

Answer 3

試試這個：

1. 將它放在屏幕外
2. 將其設置為顯示：塊
3. 得到它的高度
4. 將其設置為display：none
5. 把它重新放回原處

Answer 4

display:none; 元素被定義為沒有任何顯示屬性，因此在此狀態下不應使用高度和寬度。

您可以嘗試將其設置為visibility:hidden; ，這將保持高度和寬度。 這樣做的缺點是visibility不會影響它在頁面流中的位置，因此它還將保留布局中占用的空間。 您可以通過將position設置為absolute position或fixed position來將其從上下文流中取出來反作用。 您可能還希望將z-index設置為負值，以確保它隱藏在其余頁面元素后面，否則它可能會阻止其他元素被點擊等，即使它不可見。