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


Posted in Javascript onNovember 02, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
javascript文本模板用法实例
Jul 31 Javascript
js获取图片宽高的方法
Nov 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
You might like
thinkphp 多表 事务详解
2013/06/17 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
详解ECMAScript typeof用法
2018/07/25 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python反编译学习之字节码详解
2019/05/19 Python
python障碍式期权定价公式
2019/07/19 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python爬取微博评论的实例讲解
2021/01/15 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
地理教师岗位职责
2014/03/16 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014最新离职证明范本
2014/09/12 职场文书
共青团员自我评价范文
2014/09/14 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
罗马假日观后感
2015/06/08 职场文书