javascript获取文档坐标和视口坐标
元素的位置是以像素度量的，向右代表X坐标的增加，向下代表Y坐标的增加，但是，有两个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角。
在定级窗口和标签页中，”视口“只是实际显示文档内容的浏览器的一部分：它不包括浏览器的“外壳”（如菜单、工具条和标签页）。
针对框架也中显示的文档，是口试定了框架页的<iframe>元素。无论在何种情况下，当讨论元素的位置是，必须弄清楚所使用的坐标是文档坐标还是视口坐标。（注意，视口坐标有事也叫作窗口坐标）
如果文档比视口要小，或者说还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统是同一个。但是一般来说，要在两种坐标系之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。例如，在文档坐标中如果一个元素的Y坐标是200像素，并且用户已经把浏览器向下滚动了75像素，那么视口坐标中元素的Y坐标就是125像素。同样，在视口坐标中如果一个元素的X坐标是400像素，并且用户已经水平滚动了视口200像素，那么文档坐标中像素的X坐标中元素的X坐标就是600像素。
文档坐标比视口坐标更加基础，并且在用户滚动是他们不会发生变化。不过，在客户端编程中使用视口坐标是非常常见的。当使用CSS指定元素的位置时运用了文档坐标。但是最简单的查询元素位置的方法：getBoundingClientRect()返回视口坐标中的位置。类似的，当为鼠标事件注册事件处理程序函数时，报告的鼠标指针的坐标是在视口坐标系中。
为了在坐标系中转换，我们需要判定浏览器窗口的滚动条的位置。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开发者必备的10个Sublime Text插件
Sublime Text几乎是任何开发者在其工具箱的必备应用程序,这篇文章主要介绍了JavaScript开发者必备的10个Sublime Text插件，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了js实现鼠标经过表格行变色的方法,涉及javascript表格节点样式及鼠标事件的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了原生JS音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家详细介绍了BootStrap modal模态弹窗使用小结,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了理解JavaScript中的状态模式及适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下2022-12-12
本文JavaScript中forEach和map的使用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
今天小编就为大家分享一篇LayerClose弹窗关闭刷新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了js观察者模式的弹幕案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用 === (或 ==) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。本文为大家整理了四种常见用法，需要的可以参考一下2023-02-02
javascript 面向对象继承，需要的朋友可以参考下。2009-11-11
最新评论