一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例

更新時(shí)間：2014年10月29日 17:27:26 投稿：whsnow

這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>每天一個(gè)JavaScript實(shí)例-獲取元素當(dāng)前高度</title> 
<style> 
#date{width:90%;height:25%;padding:10px;background: red;} 
</style> 
<script> 
window.onload = function(){ 
var height = getHeight(); 
console.log(height); 
} 
function getHeight(){ 
var height = 0; 
var div = document.getElementById("date").getBoundingClientRect(); 
if(div.height){ 
height = div.height; 
}else{ 
height = div.bottom - div.top; 
} 
return height; 
} 
</script> 
</head> 

<body> 
<div style="width:1000px;height:800px;"> 
<div id = "date"> 
</div> 
</div> 
</body> 
</html>

您可能感興趣的文章:

元素高度

相關(guān)文章

BootStrap 頁(yè)簽切換失效的解決方法
bootstrap開(kāi)發(fā)標(biāo)簽頁(yè)時(shí)，標(biāo)簽頁(yè)顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒(méi)有變化。接下來(lái)通過(guò)本文給大家分享BootStrap 頁(yè)簽切換失效的解決方法，感興趣的朋友一起看看吧
2017-08-08
javascript contains和compareDocumentPosition 方法來(lái)確定是否HTML節(jié)點(diǎn)間的關(guān)
一個(gè)很棒的 blog 文章，是 PPK 兩年前寫(xiě)的，文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。
2010-02-02
如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
用JavaScript 判斷用戶(hù)使用的是 IE6 還是 IE7
判斷IE瀏覽器的腳本，方便根據(jù)瀏覽器不懂，支持不同的代碼的分別調(diào)用。
2008-01-01
微信小程序獲取手機(jī)號(hào)授權(quán)用戶(hù)登錄功能
微信小程序中有許多地方需要用戶(hù)注冊(cè)用戶(hù)信息的地方，用戶(hù)需要填寫(xiě)手機(jī)號(hào)等，下面小編給大家分享微信小程序獲取手機(jī)號(hào)授權(quán)用戶(hù)登錄功能，需要的朋友參考下吧
2017-11-11
js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼
這篇文章主要介紹了js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
webpack4.x打包過(guò)程詳解
這篇文章主要介紹了webpack4.x打包過(guò)程詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
純編碼實(shí)現(xiàn)微信小程序彈幕效果(非視頻底)
這篇文章主要介紹了微信小程序彈幕純編碼實(shí)現(xiàn),這種效果是非視頻底，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
uni-app中px與rpx的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于uni-app中px與rpx的轉(zhuǎn)換方法,rpx單位最初由微信推出,它與我們常用px一個(gè)很大的區(qū)別就是具有響應(yīng)式,需要的朋友可以參考下
2023-10-10
JavaScript設(shè)計(jì)模式--橋梁模式引入操作實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--橋梁模式,結(jié)合實(shí)例形式分析了JavaScript設(shè)計(jì)模式中橋梁模式應(yīng)用操作技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05