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调试logger组件实现代码
Nov 20 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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 接口类与抽象类的实际作用
2009/11/26 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
python之import机制详解
2014/07/03 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python实现逻辑回归的示例
2020/10/09 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
个人简历的自荐信
2013/10/23 职场文书
工业设计专业推荐信
2013/10/29 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
医德医魂心得体会
2014/09/11 职场文书
车队安全员岗位职责
2015/02/15 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
感恩父母主题班会
2015/08/12 职场文书
赞美教师的句子
2019/09/02 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
PHP判断是否是json字符串
2021/04/01 PHP
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS