javascript取得隱藏元素(display:none)的高度和寬度的方法_javascript技巧

js取得可見元素的尺寸還是比較方便的，這個可以直接使用這個方法：

複製程式碼 程式碼如下:

function getDefaultStyle(obj,attribute){ // 傳回最終樣式函數，相容於IE和DOM，設定參數：元素物件、樣式特性
 return obj.currentStyle?obj.currentStyle[attrib ]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

但是如果這個元素是隱藏(display:none)的，尺寸又是未知自適應的，哪有上面的方法就不行了！因為display:none的元素是沒有實體尺寸的！ 悲劇就這樣發生了！

幸好css中還有visibility:hidden，不可見屬性，他和display:none最大的差別就是visibility:hidden有實體尺寸。有物理尺寸就可以透過上面的方法取得尺寸，但是將display:none改成visibility:hidden後頁面就有一塊空白在那裡，即使在你獲取尺寸後在馬上將visibility:hidden改成display:none頁那部分還是會抖動一下。那麼最好的方法就是將這個隱藏的元素移出螢幕或脫離文件流（ position: absolute）。這似乎非常完美了，但是悲劇又發生了，如果你要再顯示這個元素的時侯這個元素是不可見的，位置也不對，因為這是這個元素visibility:hidden;position: absolute。所以在取得尺寸後也要將樣式還原回去。就是將position和visibility屬性設回原來的樣式。

這就是js取得隱藏元素的尺寸基本實作方式，大家有興趣可以看看《精通javascript》這本書上的方法。

我這裡也做了個簡單的demo，大家可以看看原始碼:

複製程式碼 程式碼如下:

 

这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

 

这是test容器，这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

       

点我