JS獲取一個(gè)未知DIV高度的方法

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

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

本文實(shí)例講述了JS獲取一個(gè)未知DIV高度的方法。分享給大家供大家參考，具體如下：

通過(guò)元素的clientHeight屬性能夠得到元素的高度,如：

var height = element.clientHeight;

這種做法的局限：

1. 如果元素的display屬性設(shè)置為none, 那么得到的結(jié)果為0

2. 在safari瀏覽器中，需要使用：element.offsetHeight得到實(shí)際高度，這是safari瀏覽器的bug

下面是Prototype提供的方法，能夠兼容各種瀏覽器，同時(shí)在元素隱藏的情況下也能正確得到元素尺寸，供參考：

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};
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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