javascript窗口宽高,鼠标位置,滚动高度(详细解析)


Posted in Javascript onNovember 18, 2013

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

-------------------

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:

若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;

在IE下需要深入Document内部对body进行检测;

在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。

Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。

Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。

document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码:

<!DOCTYPE html >
<html>
<head>
 <title>请调整浏览器窗口</title>
 <meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
 <h2 align="center">请调整浏览器窗口大小</h2>
 <form action="#" method="get" name="form1" id="form1">
  <!--显示浏览器窗口的实际尺寸-->
  <p>浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"></p>
  <p>浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"></p>
 </form>
 <script type="text/javascript">
   var winWidth = 0;   
   var winHeight = 0;   
   function findDimensions() //函数:获取尺寸   
   {   
    //获取窗口宽度   
    if (window.innerWidth)   winWidth = window.innerWidth;   
    else if ((document.body) && (document.body.clientWidth))   winWidth = document.body.clientWidth;   
    //获取窗口高度   
    if (window.innerHeight)   winHeight = window.innerHeight;   
    else if ((document.body) && (document.body.clientHeight))   winHeight = document.body.clientHeight;   
    //通过深入Document内部对body进行检测,获取窗口大小   
    if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)   {   
     winHeight = document.documentElement.clientHeight;   
     winWidth = document.documentElement.clientWidth;   
    }   
    //结果输出至两个文本框   
    document.form1.availHeight.value= winHeight;   
    document.form1.availWidth.value= winWidth;   
   }   
   findDimensions();   
   //调用函数,获取数值   
   window.onresize=findDimensions;
 </script>
</body>
</html>

源程序解读

(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

(6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
简单的代码实现jquery定时器
Nov 17 #Javascript
禁止空格提交表单的js代码
Nov 17 #Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 #Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 #Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 #Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 #Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 #Javascript
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue强制刷新组件的方法示例
2019/02/28 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现哈希表
2014/02/07 Python
python实现爬虫下载漫画示例
2014/02/16 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
python help函数实例用法
2020/12/06 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
AOP的定义以及作用
2013/09/08 面试题
中文师范生自荐信
2014/01/30 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
2014年优秀党员材料
2014/12/18 职场文书
社区国庆节活动总结
2015/03/23 职场文书