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 相关文章推荐
JS定时器实例详细分析
Oct 11 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
js实现简单选项卡功能
Mar 23 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python sorted函数的小练习及解答
2019/09/18 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
参观监狱心得体会
2014/01/02 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
担保书范本
2015/01/20 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android