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加强的经典分页实例
Mar 15 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
学习jQuey中的return false
Dec 18 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
google地图的路线实现代码
2009/08/20 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
sort命令的作用和用法
2012/11/04 面试题
市场营销管理毕业生自荐信
2014/03/03 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
一个独生女的故事观后感
2015/06/04 职场文书