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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
详解JSON Web Token 入门教程
Jul 30 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 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获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python selenium的基本使用方法分析
2019/12/21 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
大一学生职业生涯规划
2014/03/11 职场文书
学校班班通实施方案
2014/06/11 职场文书
客房部经理岗位职责
2015/02/02 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers