JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁面高度的方法
本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁面高度的方法。分享給大家供大家參考,具體如下:
這是一個(gè)JavaScript特效代碼,點(diǎn)擊獲取網(wǎng)頁高度,在ie6下實(shí)現(xiàn)position-fixed的效果,另外針對(duì)遮罩的問題(大概是做lightBox吧),個(gè)人覺得純css法(不包括其顯示/隱藏)將更適合。
運(yùn)行效果截圖如下:
在線演示地址如下:
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點(diǎn)擊獲取網(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="點(diǎn)擊獲取頁面高度" /><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>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript模擬實(shí)現(xiàn)新浪下拉菜單效果
這篇文章主要為大家介紹了如何通過JavaScript模擬實(shí)現(xiàn)新浪的下拉菜單效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-03-03JS實(shí)現(xiàn)的透明度漸變動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的透明度漸變動(dòng)畫效果,涉及javascript響應(yīng)鼠標(biāo)事件針對(duì)頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JS實(shí)現(xiàn)切換標(biāo)簽頁效果實(shí)例代碼
這篇文章介紹了JS實(shí)現(xiàn)切換標(biāo)簽頁效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11將JSON字符串轉(zhuǎn)換成Map對(duì)象的方法
下面小編就為大家?guī)硪黄獙SON字符串轉(zhuǎn)換成Map對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03