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 innerText和innerHtml应用
Jan 28 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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程序
2006/10/09 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
php7性能提升的原因详解
2019/10/13 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python探索之修改Python搜索路径
2017/10/25 Python
详解python中的 is 操作符
2017/12/26 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python整数对象实现原理详解
2019/07/01 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
用python制作个视频下载器
2021/02/01 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
培训讲师邀请函
2014/01/10 职场文书
2014庆六一活动方案
2014/03/02 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
跳蚤市场口号
2014/06/13 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
python用字节处理文件实例讲解
2021/04/13 Python