A5下载文章资讯

分类分类

JS实现点击按钮获取页面高度的方法

2015-11-03 14:52作者:zhao

 本文实例讲述了JS实现点击按钮获取页面高度的方法。分享给大家供大家参考,具体如下:

这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合。

运行效果截图如下:

具体代码如下:

<!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点击获取网页高度</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 />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

</div></body>

</html>

希望本文所述对大家JavaScript程序设计有所帮助。

展开全部

相关

说两句网友评论
    我要跟贴
    取消