JS實現(xiàn)點擊按鈕獲取頁面高度的方法
更新時間：2015年11月02日 10:55:09 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)點擊按鈕獲取頁面高度的方法,涉及JavaScript針對頁面元素高度的各種常見運算,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)點擊按鈕獲取頁面高度的方法。分享給大家供大家參考，具體如下：
這是一個JavaScript特效代碼，點擊獲取網(wǎng)頁高度，在ie6下實現(xiàn)position-fixed的效果，另外針對遮罩的問題（大概是做lightBox吧），個人覺得純css法（不包括其顯示/隱藏）將更適合。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript點擊獲取網(wǎng)頁高度</title>
<style type="text/css">
html,body { overflow:hidden; height:100%; margin:0; padding:0;}
div { height:100%; overflow:auto;}
</style>
<script language="javascript">
function getHeight(){
var wrapDiv=document.getElementById("wrapDiv");
alert("document.body.offsetHeight:" + document.body.offsetHeight);
alert("document.body.scrollHeight:" + document.body.scrollHeight);
alert("wrapDiv.offsetHeight" + wrapDiv.offsetHeight);
alert("wrapDiv.scrollHeight:" + wrapDiv.scrollHeight);
}
</script>
</head>
<body><div id="wrapDiv">
<input class="e_button" type="button" onclick="getHeight();" value="點擊獲取頁面高度" /><br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />內(nèi)容<br />
</div></body>
</html>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了webpack3.0升級4.0的方法步驟,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了ES6之Proxy的get方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家介紹了如何通過JavaScript模擬實現(xiàn)新浪的下拉菜單效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試2022-03-03
這篇文章主要介紹了JS實現(xiàn)的透明度漸變動畫效果,涉及javascript響應(yīng)鼠標事件針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章介紹了JS實現(xiàn)切換標簽頁效果實例代碼，有需要的朋友可以參考一下2013-11-11
下面小編就為大家?guī)硪黄獙SON字符串轉(zhuǎn)換成Map對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實例形式較為詳細的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03