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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Android中关于百度糯米app关闭网页或窗口的方法(99%人不知)

    Android中关于百度糯米app关闭网页或窗口的方法(99%人不知)

    我们公司做了一款使用百度钱包的移动网页支付进行支付的产品,用户通过百度钱包.百度糯米扫描我们 产品的二维码,选择商品,点击支付将会自动调用百度钱包进行支付,支付成功后返回成功页面,在我们的成功页面有关闭 网页按钮,点击关闭按钮或者返回按钮将会关闭页面. 在百度钱包中使用百度轻应用的BLightApp.closeWindow() 方法可以关闭,但是在百度糯米中,按道理可以使用呀, 但是根本就不行,改成传统的window.close()也不行.当时我们在网上搜索和百度糯米的官网中,都没找到解决方法.

  • 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法

    最近在使用微信.支付宝.百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息.当在错误页面的时候,点击返回或者Android物理按键上一步的时候,将关闭页面. 在微信.支付宝.百度钱包中,他们对页面关闭进行了封装,传统的window.close()是无效的,必须要使用它们的js代码才能关闭. 下面是三种移动app的关闭方式: WeixinJSBridge.call('closeWindow');//微信 AlipayJSBridge.call('closeWebview'

  • jQuery中iframe的操作(点击按钮新增窗口)

    jQuery中iframe的操作(点击按钮新增窗口)

    <iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分. 今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息? 如下图所示: 点击之前: 单击之后: 分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术. [<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分.] 实现是思路:(1)在按钮的上添加一个

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • 点击按钮或链接不跳转只刷新页面的脚本整理

    复制代码 代码如下: <input type=button value=刷新 onclick="history.go(0)"> <input type=button value=刷新 onclick="location.reload()"> <input type=button value=刷新 onclick="location=location"> <input type=button value=刷

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

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

    本文实例讲述了JS实现点击按钮获取页面高度的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/ 具体代码如下: <!DOCTYPE html P

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

  • vue.js 实现点击按钮动态添加li的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="

  • JS实现点击按钮随机生成可拖动的不同颜色块示例

    JS实现点击按钮随机生成可拖动的不同颜色块示例

    本文实例讲述了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"> &

  • js实现点击按钮随机生成背景颜色

    本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码,供大家参考,具体内容如下 通过点击按钮更换整个页面的背景颜色 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div调整高度.调整宽度.调整背景色等.实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • AngularJS 实现点击按钮获取验证码功能实例代码

    html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his

  • Repeater中添加按钮实现点击按钮获取某一行数据的方法

    Repeater中添加按钮实现点击按钮获取某一行数据的方法

    本文以一个asp.net程序为例讲述了Repeater中添加按钮实现点击按钮获取某一行数据的方法,分享给大家供大家参考借鉴之用.具体步骤如下: 1.添加编辑按钮和删除按钮 具体代码如下: <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

随机推荐