JS獲取一個未知DIV高度的方法
本文實例講述了JS獲取一個未知DIV高度的方法。分享給大家供大家參考,具體如下:
通過元素的clientHeight屬性能夠得到元素的高度,如:
var height = element.clientHeight;
這種做法的局限:
1. 如果元素的display屬性設置為none, 那么得到的結果為0
2. 在safari瀏覽器中,需要使用:element.offsetHeight得到實際高度,這是safari瀏覽器的bug
下面是Prototype提供的方法,能夠兼容各種瀏覽器,同時在元素隱藏的情況下也能正確得到元素尺寸,供參考:
getDimensions: function(element) { element = $(element); var display = $(element).getStyle('display'); if (display != 'none' && display != null) // Safari bug return {width: element.offsetWidth, height: element.offsetHeight}; // All *Width and *Height properties give 0 on elements with display none, // so enable the element temporarily var els = element.style; var originalVisibility = els.visibility; var originalPosition = els.position; var originalDisplay = els.display; els.visibility = 'hidden'; els.position = 'absolute'; els.display = 'block'; var originalWidth = element.clientWidth; var originalHeight = element.clientHeight; els.display = originalDisplay; els.position = originalPosition; els.visibility = originalVisibility; return {width: originalWidth, height: originalHeight}; }
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- 基于javascript實現(xiàn)按圓形排列DIV元素(一)
- javascript實現(xiàn)鼠標點擊頁面 移動DIV
- JS控制div跳轉到指定的位置的幾種解決方案總結
- js實現(xiàn)非常棒的彈出div
- 完美的js div拖拽實例代碼
- 基于JavaScript實現(xiàn)鼠標向下滑動加載div的代碼
- AngularJS動態(tài)生成div的ID源碼解析
- JavaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例
- js動態(tài)添加的DIV中的onclick事件簡單實例
- js 動態(tài)添加元素(div、li、img等)及設置屬性的方法
- JS把內容動態(tài)插入到DIV的實現(xiàn)方法
- 基于javascript實現(xiàn)按圓形排列DIV元素(二)
相關文章
JS實現(xiàn)將Asp.Net的DateTime Json類型轉換為標準時間的方法
這篇文章主要介紹了JS實現(xiàn)將Asp.Net的DateTime Json類型轉換為標準時間的方法,涉及javascript針對時間與日期操作的相關技巧,需要的朋友可以參考下2016-08-08javascript中json對象json數(shù)組json字符串互轉及取值方法
這篇文章主要介紹了javascript中json對象json數(shù)組json字符串互轉及取值方法,需要的朋友可以參考下2017-04-04使用javaScript動態(tài)加載Js文件和Css文件
這篇文章主要介紹了如何使用javaScript動態(tài)加載Js文件和Css文件2015-10-10淺析JS給原始數(shù)據(jù)類型加屬性和方法為什么不報錯
這篇文章主要想和大家一起探討一下JavaScript中給原始數(shù)據(jù)類型添加屬性和方法為什么不報錯,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-11-11