javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧
來源：懂視網
責編：小采
時間：2020-11-27 21:24:08
javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧
javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧:js獲取可見元素的尺寸還是比較方便的，這個可以直接使用這個方法： 代碼如下:function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性 return obj.currentStyleobj.curren
導讀javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧:js獲取可見元素的尺寸還是比較方便的，這個可以直接使用這個方法： 代碼如下:function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性 return obj.currentStyleobj.curren
js獲取可見元素的尺寸還是比較方便的，這個可以直接使用這個方法：
代碼如下:
function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性
return obj.currentStyle?obj.currentStyle[attribute]: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，大家可以看看源代碼:
代碼如下:
js獲取隱藏元素的尺寸聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧
javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧:js獲取可見元素的尺寸還是比較方便的，這個可以直接使用這個方法： 代碼如下:function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性 return obj.currentStyleobj.curren
