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 相关文章推荐
如何在node的express中使用socket.io
Dec 15 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
javaScript封装的各种写法
Aug 14 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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.MVC的模板标签系统(一)
2006/09/05 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
关于Python作用域自学总结
2019/06/10 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python数值基础知识浅析
2019/11/19 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
EJB面试题
2015/07/28 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
物业管理个人自我评价
2013/11/08 职场文书
委托证明的格式
2014/01/10 职场文书
三好学生竞选稿
2015/11/21 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python