JS實現(xiàn)點擊按鈕獲取頁面高度的方法
本文實例講述了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)文章
Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03