javascript获取文档坐标和视口坐标


Posted in Javascript onMay 26, 2015

元素的位置是以像素度量的,向右代表X坐标的增加,向下代表Y坐标的增加,但是,有两个不同的点作为坐标系的原点:元素的X和Y坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角。

在定级窗口和标签页中,”视口“只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳”(如菜单、工具条和标签页)。

javascript获取文档坐标和视口坐标

针对框架也中显示的文档,是口试定了框架页的<iframe>元素。无论在何种情况下,当讨论元素的位置是,必须弄清楚所使用的坐标是文档坐标还是视口坐标。(注意,视口坐标有事也叫作窗口坐标)

如果文档比视口要小,或者说还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统是同一个。但是一般来说,要在两种坐标系之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。例如,在文档坐标中如果一个元素的Y坐标是200像素,并且用户已经把浏览器向下滚动了75像素,那么视口坐标中元素的Y坐标就是125像素。同样,在视口坐标中如果一个元素的X坐标是400像素,并且用户已经水平滚动了视口200像素,那么文档坐标中像素的X坐标中元素的X坐标就是600像素。

文档坐标比视口坐标更加基础,并且在用户滚动是他们不会发生变化。不过,在客户端编程中使用视口坐标是非常常见的。当使用CSS指定元素的位置时运用了文档坐标。但是最简单的查询元素位置的方法:getBoundingClientRect()返回视口坐标中的位置。类似的,当为鼠标事件注册事件处理程序函数时,报告的鼠标指针的坐标是在视口坐标系中。

javascript获取文档坐标和视口坐标

为了在坐标系中转换,我们需要判定浏览器窗口的滚动条的位置。Window对象的pageXoffset和pageYOffset属性在所有的浏览器中提供这些值,除了IE8及更早的版本以外。IE(和所有现代浏览器)也可以通过scrollLeft和scrollTop属性来获得滚动条的位置。令人迷惑的是,正常的情况下通过查找文档的根节点(document.documentElement)来获取这些属性,但是在怪异模式下,必须在文档的<body>元素(documeng.body)上查询它们。以下显示了如何简便的查询滚动条的位置。

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;  
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft; 
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};  
  }
}

有时候能够判定视口的尺寸也是非常有用的,例如,为了确定文档的案部分是当前可见的。利用滚动偏移量查询视口的尺寸的简单方法在IE8及更早版本中无法工作,而且该技术在IE中的运行法师还要取决于浏览器是否处于怪异模式还是标准模式。

window下的属性:

innerHeight:包括滚动条在内的窗口内容部分的高度

innerWidth:包括滚动条在内的窗口内容部分的宽度

outerHeight:整个浏览器的高度,包括界面所有组成部分。

outerWidth:整个浏览器的宽度,包括界面所有组成部分。

pageXOffset:浏览器窗口的滚动条X轴的位置

pageYOffset:浏览器窗口的滚动条Y轴的位置

scrollX:浏览器窗口的滚动条X轴的位置

scrollY:浏览器窗口的滚动条Y轴的位置

属性

document.documentElement document.body
clientHeight 视口内可见内容的大小,不包括滚动的部分和滚动条。
clientWidth
clientLeft

   
clientTop   
offsetHeight 内容大小,并且包括滚动条。
offsetWidth
offsetLeft   
offsetTop   
scrollHeight 滚动内容的大小,包括滚动的部分,但不包括滚动条。
scrollWidth
scrollTop   
scrollWidth   

查询窗口的视口尺寸:

function getViewportSize(w){
w = w || window;

var cWidth,cHeight;

if(w.innerWidth != null){


cWidth = w.innerWidht;


cHeight = w.innerHeight;


return {w:cWidth,h:w.cHeight};

}

if(document.compatMode == "CSS1Compat"){


cWidth = document.documentElement.clientWidth;


cHeight = doument.documentElement.clientHeight;


return {w:cWidth,h:w.cHeight};

}else if(document.compatMode == "BackCompat"){


cWidth = document.body.clientWidth;


cHeight = doument.body.clientHeight;


return {w:cWidth,h:w.cHeight};

}
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 #Javascript
javascript事件冒泡和事件捕获详解
May 26 #Javascript
解析javascript中鼠标滚轮事件
May 26 #Javascript
JS中字符串trim()使用示例
May 26 #Javascript
JSON字符串和对象之间的转换详解
May 26 #Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 #Javascript
Javascript实现飞动广告效果的方法
May 25 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
php正则表达式(regar expression)
2011/09/10 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php实现session共享的实例方法
2019/09/19 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
机电专业体育教师求职信
2013/09/21 职场文书
2014年国培研修感言
2014/03/09 职场文书
六五普法宣传标语
2014/10/06 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
九年级英语教学反思
2016/02/15 职场文书