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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
详解node中创建服务进程
May 09 Javascript
Javascript中的async awai的用法
May 17 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
js代码实现轮播图
May 04 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
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP基本语法实例总结
2016/09/09 PHP
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python3 实现调用串口功能
2019/12/26 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
优秀党员主要事迹
2014/01/19 职场文书
平安工地建设方案
2014/05/06 职场文书
关于读书的演讲稿
2014/05/07 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
小学教师岗位职责
2015/04/02 职场文书
办公经费申请报告
2015/05/15 职场文书
信用卡收入证明范本
2015/06/12 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Python自动化爬取天眼查数据的实现
2021/06/15 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
如何优化vue打包文件过大
2022/04/13 Vue.js