当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-07 18:17 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了JS实现点击按钮获取页面高度的方法。分享给大家供大家参考，具体如下：这是一个JavaScript特效代码，点击获取网页高度，在ie6下实现position-fixed的效果，另外针对遮罩的问题（大概是做lightBox吧），个人觉得纯css法（不包括其显示/隐藏）将更适合。运行效果截图如下： [img]http://files.jb51.net/file_images/article/201511/2015112110824848.png?201510211839[/img] 在线演示地址如下： [url=http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/]http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/[/url] 具体代码如下：

<!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程序设计有所帮助。

全部评论(0)

上一篇：qq悬浮代码(兼容各个浏览器)
下一篇：JS动态获取当前时间,并写到特定的区域

资讯排行榜
更多>>