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刷新框架子页面的七种方法代码
Nov 20 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
详解jQuery选择器
Dec 21 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
详解Node.js异步处理的各种写法
Jun 09 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目录导航文件代码
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
PyQt5每天必学之布局管理
2018/04/19 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
如何编写python的daemon程序
2021/01/07 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
指导教师评语
2014/04/26 职场文书
团支部建设方案
2014/05/02 职场文书
企业承诺书怎么写
2014/05/24 职场文书
创先争优公开承诺书
2014/08/30 职场文书
保管员岗位职责
2015/02/14 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题