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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:24:08

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

javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧:js獲取可見元素的尺寸還是比較方便的，這個(gè)可以直接使用這個(gè)方法：代碼如下:function getDefaultStyle(obj,attribute){ // 返回最終樣式函數(shù)，兼容IE和DOM，設(shè)置參數(shù)：元素對(duì)象、樣式特性 return obj.currentStyleobj.curren

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascript獲取隱藏元素(display:none)的高度和寬度的方法_javascript技巧:js獲取可見元素的尺寸還是比較方便的，這個(gè)可以直接使用這個(gè)方法：代碼如下:function getDefaultStyle(obj,attribute){ // 返回最終樣式函數(shù)，兼容IE和DOM，設(shè)置參數(shù)：元素對(duì)象、樣式特性 return obj.currentStyleobj.curren

js獲取可見元素的尺寸還是比較方便的，這個(gè)可以直接使用這個(gè)方法：
代碼如下:
function getDefaultStyle(obj,attribute){ // 返回最終樣式函數(shù)，兼容IE和DOM，設(shè)置參數(shù)：元素對(duì)象、樣式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

但是如果這個(gè)元素是隱藏(display:none)的，尺寸又是未知自適應(yīng)的，哪有上面的方法就不行了！因?yàn)閐isplay:none的元素是沒有物理尺寸的！悲劇就這樣發(fā)生了！

幸好css中還有visibility:hidden，不可見屬性，他和display:none最大的區(qū)別就是visibility:hidden有物理尺寸。有物理尺寸就可以通過上面的方法獲取尺寸，但是將display:none改成visibility:hidden后頁面就有一塊空白在那里，即使在你獲取尺寸后在馬上將visibility:hidden改成display:none頁面那部分還是會(huì)抖動(dòng)一下。那么最好的辦法就是將這個(gè)隱藏的元素移出屏幕或者脫離文檔流（ position: absolute）。這樣似乎非常完美了，但是悲劇又發(fā)生了，如果你要再顯示這個(gè)元素的時(shí)侯這個(gè)元素是不可見的，位置也不對(duì)，因?yàn)檫@是這個(gè)元素visibility:hidden;position: absolute。所以在獲取尺寸后還要將樣式還原回去。就是將position和visibility屬性設(shè)回原來的樣式。

這就是js獲取隱藏元素的尺寸基本實(shí)現(xiàn)方式，大家有興趣可以看看《精通javascript》這本書上的方法。

我這里也做了個(gè)簡(jiǎn)單的demo，大家可以看看源代碼:
代碼如下:

js獲取隱藏元素的尺寸

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com