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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 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中for循环语句的几种变型
2007/03/16 PHP
ThinkPHP安装和设置
2015/07/27 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
js实现checkbox全选和反选示例
2014/05/01 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python中类的属性和方法介绍
2018/11/27 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
学生喝酒检讨书
2014/02/06 职场文书
业务员自荐信范文
2014/04/20 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
如何自己动手写SQL执行引擎
2021/06/02 MySQL
利用Python判断你的密码难度等级
2021/06/02 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
Golang jwt身份认证
2022/04/20 Golang