脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS点击按钮获取页面高度

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

 更新时间：2015年11月02日 10:55:09   作者：企鹅  
这篇文章主要介绍了JS实现点击按钮获取页面高度的方法,涉及JavaScript针对页面元素高度的各种常见运算,具有一定参考借鉴价值,需要的朋友可以参考下

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

这是一个JavaScript特效代码，点击获取网页高度，在ie6下实现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点击获取网页高度</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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript运动框架 多值运动(四)

    JavaScript运动框架 多值运动(四)

    这篇文章主要为大家详细介绍了JavaScript运动框架第四部分，多值运动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS对select控件option选项的增删改查示例代码

    JS对select控件option选项的增删改查示例代码

    Javascript操作select是表单中比较常见的，大家可以在网上搜索到很多的相关资料，接下来为大家详细介绍下，JS动态操作select中的各种方法，感兴趣的朋友可以参考下
    2013-10-10
  • DEDECMS如何为文章添加HOT NEW标志图片

    DEDECMS如何为文章添加HOT NEW标志图片

    再用织梦建站的时候，常常需要要在列表页添加前两天的文章后面添加个new小图片，那么此功能是怎么实现的呢，下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片，需要的朋友可以参考下
    2015-08-08
  • javascript实现简单的on事件绑定

    javascript实现简单的on事件绑定

    这篇文章主要介绍了javascript中Event 对象中的 on, off 方法，非常的简单实用，有需要的小伙伴可以参考下
    2016-08-08
  • js实现延迟加载的方法

    js实现延迟加载的方法

    这篇文章主要介绍了js实现延迟加载的方法,涉及javascript中setTimeout与setInterval方法的使用技巧,需要的朋友可以参考下
    2015-06-06
  • 基于javascript实现图片切换效果

    基于javascript实现图片切换效果

    这篇文章主要介绍了基于javascript实现图片切换效果的相关资料,需要的朋友可以参考下
    2016-04-04
  • javascript实现信息增删改查的方法

    javascript实现信息增删改查的方法

    这篇文章主要介绍了javascript实现信息增删改查的方法,实例分析了javascript操作页面元素实现针对页面信息的增删改查功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript定时器setTimeout()和setInterval()详解

    JavaScript定时器setTimeout()和setInterval()详解

    这篇文章主要为大家详细介绍了JavaScript定时器setTimeout()和setInterval()的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 一篇文章弄懂javascript内存泄漏

    一篇文章弄懂javascript内存泄漏

    js的垃圾回收机制就是为了防止内存泄漏的,这篇文章主要给大家介绍了如何通过一篇文章弄懂javascript内存泄漏的相关资料,需要的朋友可以参考下
    2021-05-05
  • 代码精简的可以实现元素圆角的js函数

    代码精简的可以实现元素圆角的js函数

    代码精简的可以实现元素圆角的js函数...
    2007-07-07

最新评论