JS獲取一個(gè)未知DIV高度的方法
本文實(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)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面 移動(dòng)DIV
- JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)
- js實(shí)現(xiàn)非常棒的彈出div
- 完美的js div拖拽實(shí)例代碼
- 基于JavaScript實(shí)現(xiàn)鼠標(biāo)向下滑動(dòng)加載div的代碼
- AngularJS動(dòng)態(tài)生成div的ID源碼解析
- JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例
- js動(dòng)態(tài)添加的DIV中的onclick事件簡(jiǎn)單實(shí)例
- js 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
- JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)
相關(guān)文章
JS實(shí)現(xiàn)將Asp.Net的DateTime Json類型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)將Asp.Net的DateTime Json類型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法,涉及javascript針對(duì)時(shí)間與日期操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
javascript中json對(duì)象json數(shù)組json字符串互轉(zhuǎn)及取值方法
這篇文章主要介紹了javascript中json對(duì)象json數(shù)組json字符串互轉(zhuǎn)及取值方法,需要的朋友可以參考下2017-04-04
es6中new.target的作用和使用場(chǎng)景簡(jiǎn)單示例分析
這篇文章主要介紹了es6中new.target的作用和使用場(chǎng)景,結(jié)合簡(jiǎn)單示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
使用javaScript動(dòng)態(tài)加載Js文件和Css文件
這篇文章主要介紹了如何使用javaScript動(dòng)態(tài)加載Js文件和Css文件2015-10-10
微信小程序?qū)崿F(xiàn)時(shí)間預(yù)約功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間預(yù)約基本功能,一個(gè)類似電商的時(shí)間預(yù)約功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展
一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展...2006-10-10
微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
淺析JS給原始數(shù)據(jù)類型加屬性和方法為什么不報(bào)錯(cuò)
這篇文章主要想和大家一起探討一下JavaScript中給原始數(shù)據(jù)類型添加屬性和方法為什么不報(bào)錯(cuò),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-11-11

