JS獲取一個未知DIV高度的方法

更新時間：2016年08月09日 15:25:26 作者：modun

這篇文章主要介紹了JS獲取一個未知DIV高度的方法,涉及javascript針對頁面元素屬性的動態(tài)操作相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

js+canvas實現(xiàn)兩張圖片合并成一張圖片的方法
這篇文章主要介紹了js+canvas實現(xiàn)兩張圖片合并成一張圖片的方法,結合實例形式分析了JavaScript結合HTML5 canvas實現(xiàn)圖片合并的操作技巧,并附帶了Java圖片合并的實現(xiàn)方法,需要的朋友可以參考下
2019-11-11
html的DOM中Event對象onblur事件用法實例
這篇文章主要介紹了html的DOM中Event對象onblur事件用法,實例分析了onblur事件的使用范圍與對應的javascript使用技巧,需要的朋友可以參考下
2015-01-01
js實現(xiàn)橫向拖拽導航條功能
本文主要介紹了js實現(xiàn)橫向拖拽導航條功能的方法。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
如何阻止復制剪切和粘貼事件為了表單內(nèi)容的安全
提交表單內(nèi)容如（密碼）重要信息時，為了安全，需要阻止一些復制剪切和粘貼事件，下面與大家分享一個實例，感興趣的朋友可以參考下哈
2013-05-05
Object.keys()的用法示例詳解
Object.keys()是遍歷一個對象自身的屬性名稱(不包括繼承屬性)的最簡單方法，這篇文章主要介紹了Object.keys()的用法,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-07-07
javascript中活靈活現(xiàn)的Array對象詳解
本文的內(nèi)容就如同標題一樣，這篇文章將會靈活的運行Array對象的一些方法來實現(xiàn)看上去較復雜的應用。相信對大家學習或者理解javascript中的Array對象能具有一定的參考借鑒價值，有需要的朋友們下面跟著小編一起來學習學習吧。
2016-11-11
關于Javascript中defer和async的區(qū)別總結
相信看過javascript高級程序設計的人，在javascript高級程序設計里，應該看到了介紹了有關defer和async的區(qū)別，可是比較淺顯，而且也說得不是很清楚。下面我們來通過這篇文章來詳細了解下dfer和async的區(qū)別。
2016-09-09
JS動態(tài)圖片的實現(xiàn)方法完整示例
這篇文章主要介紹了JS動態(tài)圖片的實現(xiàn)方法,結合完整實例形式分析了JavaScript鼠標響應與頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下
2020-01-01
詳解釘釘小程序組件之自定義模態(tài)框（彈窗封裝實現(xiàn)）
這篇文章主要介紹了釘釘小程序組件之自定義模態(tài)框（彈窗封裝實現(xiàn)）的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
深入淺析JavaScript中的scrollTop
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07