快捷導(dǎo)航

JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法

更新時(shí)間：2015年11月02日 10:55:09 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法,涉及JavaScript針對(duì)頁(yè)面元素高度的各種常見運(yùn)算,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法。分享給大家供大家參考，具體如下：

這是一個(gè)JavaScript特效代碼，點(diǎn)擊獲取網(wǎng)頁(yè)高度，在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)頁(yè)高度</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)擊獲取頁(yè)面高度" /><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ì)有所幫助。

您可能感興趣的文章: