Javascript获取页面的各种坐标汇总
说明,本文全部内容都基于各浏览器的标准渲染模式。也就是在HTML文件首部有标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或
<!DOCTYPE html>
1)鼠标点击事件的坐标,相对于可视区域(Client)左上角
var point_y = evt.clientY;
var point_x = evt.clientX;
其中evt为鼠标点击事件。
2)可视区域左上角的坐标,相对于整个页面(Page)左上角
if(window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
else if(typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
关于document.compatMode,请参考 关于document.compatMode的一些介绍
3) 某元素的左上角坐标,相对于整个页面(Page)左上角
function elementLeft(e)
{
var offset = e.offsetLeft;
if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
return offset;
}
4) 网页全文高和宽
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
其中,IE7/IE8/IE9/Firefox行为一致,指的都是抛除position=absolute的元素且不管页面缩放的全文高度;Chrome行为稍有不同,计算宽度和高度时包含了position=absolute的元素;且当页面缩放时,当全文高度/宽度小于可视区域的高度和宽度时,给出的是可视区域的高度和宽度。
5)屏幕分辨率的高和宽
屏幕分辨率的高 window.screen.height
屏幕分辨率的宽 window.screen.width
其中,当页面不缩放时,三种浏览器的行为一致,都是获得真实的屏幕分辨率;
当页面缩放时,Chrome返回的值不变,而IE7/IE8/IE9/Firefox的行为一致,返回 屏幕分辨率/缩放比例。
比如,当屏幕分辨率为1920*1200,缩放比例200%时,返回960*600.
6) 网页可视区域的高和宽
网页可见区域宽 document.body.clientWidth
网页可见区域高 document.body.clientHeight
该高度和宽度扣除了浏览器右侧和底部的滚动条,也扣除了body的margin.
高度 = Min(页面高度,可视高度)宽度 = Max(页面宽度,可视高度)
其中,如果页面底部是某些元素的margin,则此margin不计算在页面高度内;
注意,页面缩放后,高度不变,宽度为(原始宽度/缩放比例)
7) 网页被卷去的高和宽
网页被卷去的宽度 window.pageXOffset; document.documentElement.scrollLeft;
网页被卷去的高度 window.pageYOffset;document.documentElement.scrollTop;
其中,前者三种浏览器都支持,Chrome不支持后者。
8) 某元素ScrollHeight / OffsetHeight / ClientHeight的区别
OffsetHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;自身的overflow高度对此就没有影响。
scrollHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;受自身的overflow影响。
clientHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;受自身的overflow影响。
经过测试,发现在所有情形下scrollHeight与clientHeight的值都相同...有点诡异。
注意,IE系列浏览器的滚动条的宽度和高度是是固定的16px,不受缩放影响;Firefox和Chrome的滚动条在100%的时候是16px,当缩放时,该宽度和高度发生变化,为 (16/缩放比例)px.
9)某元素的OffsetTop
对于position!=absolute的元素,offsettop为其相对于其祖先元素中最近的一个postion=relative或position=absolute的元素的偏移。
对于position=absolute的元素,offsettop为其top属性指定的值,如果该属性为空,则与position!=absolute的时候算法相同;
10)某元素的ScrollTop
注意,scrollTop是指某一元素内部的元素被卷去的高度;而不是该元素本身被卷去的高度;
只有当该元素的overflow=auto或scroll的时候,该数值才有意义;
说明,本文全部内容都基于各浏览器的标准渲染模式。也就是在HTML文件首部有标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或
<!DOCTYPE html>
1)鼠标点击事件的坐标,相对于可视区域(Client)左上角
var point_y = evt.clientY;
var point_x = evt.clientX;
其中evt为鼠标点击事件。
2)可视区域左上角的坐标,相对于整个页面(Page)左上角
if(window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
else if(typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
关于document.compatMode,请参考 关于document.compatMode的一些介绍
3) 某元素的左上角坐标,相对于整个页面(Page)左上角
function elementLeft(e)
{
var offset = e.offsetLeft;
if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
return offset;
}
4) 网页全文高和宽
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
其中,IE7/IE8/IE9/Firefox行为一致,指的都是抛除position=absolute的元素且不管页面缩放的全文高度;Chrome行为稍有不同,计算宽度和高度时包含了position=absolute的元素;且当页面缩放时,当全文高度/宽度小于可视区域的高度和宽度时,给出的是可视区域的高度和宽度。
5)屏幕分辨率的高和宽
屏幕分辨率的高 window.screen.height
屏幕分辨率的宽 window.screen.width
其中,当页面不缩放时,三种浏览器的行为一致,都是获得真实的屏幕分辨率;
当页面缩放时,Chrome返回的值不变,而IE7/IE8/IE9/Firefox的行为一致,返回 屏幕分辨率/缩放比例。
比如,当屏幕分辨率为1920*1200,缩放比例200%时,返回960*600.
6) 网页可视区域的高和宽
网页可见区域宽 document.body.clientWidth
网页可见区域高 document.body.clientHeight
该高度和宽度扣除了浏览器右侧和底部的滚动条,也扣除了body的margin.
高度 = Min(页面高度,可视高度)宽度 = Max(页面宽度,可视高度)
其中,如果页面底部是某些元素的margin,则此margin不计算在页面高度内;
注意,页面缩放后,高度不变,宽度为(原始宽度/缩放比例)
7) 网页被卷去的高和宽
网页被卷去的宽度 window.pageXOffset; document.documentElement.scrollLeft;
网页被卷去的高度 window.pageYOffset;document.documentElement.scrollTop;
其中,前者三种浏览器都支持,Chrome不支持后者。
8) 某元素ScrollHeight / OffsetHeight / ClientHeight的区别
OffsetHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;自身的overflow高度对此就没有影响。
scrollHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;受自身的overflow影响。
clientHeight为元素的高度,被挡住的部分同样计算在内;其父元素的overflow属性对此值没有影响;受自身的overflow影响。
经过测试,发现在所有情形下scrollHeight与clientHeight的值都相同...有点诡异。
注意,IE系列浏览器的滚动条的宽度和高度是是固定的16px,不受缩放影响;Firefox和Chrome的滚动条在100%的时候是16px,当缩放时,该宽度和高度发生变化,为 (16/缩放比例)px.
9)某元素的OffsetTop
对于position!=absolute的元素,offsettop为其相对于其祖先元素中最近的一个postion=relative或position=absolute的元素的偏移。
对于position=absolute的元素,offsettop为其top属性指定的值,如果该属性为空,则与position!=absolute的时候算法相同;
10)某元素的ScrollTop
注意,scrollTop是指某一元素内部的元素被卷去的高度;而不是该元素本身被卷去的高度;
只有当该元素的overflow=auto或scroll的时候,该数值才有意义;
Javascript获取页面的各种坐标汇总的更多相关文章
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- javascript 获取页面的高度及滚动条的位置的代码
http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript ...
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
- 利用JavaScript获取页面文档内容
JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html ...
- javascript获取页面文档内容
<html> <head> <title>JavaScript基础</title> </head> <body> <p&g ...
- javascript 获取页面尺寸/位置
************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...
- Javascript 获取页面高度(多种浏览器)
//2015年8月13日11:00:50 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: d ...
随机推荐
- opengl读取灰度图生成三维地形并添加光照
转自:https://www.cnblogs.com/gucheng/p/10152889.html 准备第三方库 glew.freeglut.glm.opencv 准备一张灰度图 最终效果 代码如下 ...
- 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2
1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...
- 带CheckBox美化控件的表格全选
带CheckBox美化控件 <table class="positionTable commonListTable" id="positionTable" ...
- spring_boot实战日记(二)logback的使用和配置
日志:描述系统运行状态的所有信息都是日志. 日志能力: 1.定制输出目标. 2.定制输出格式. 3.携带上下文信息 4.运行时选择输出. 5.灵活的配置 日志选择: 日志门面:JCL(和Logback ...
- A+B for Polynomials
This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...
- Centos下Redis集群的搭建实现读写分离
Centos下Redis一主多从架构搭建 搭建目标:因为自己笔记本电脑配置较低的原因,模拟两台机器之间搭建一主一从的架构,主节点Redis主要用来写数据,数据写入到主节点的Redis,然后从节点就可以 ...
- 装饰器login_required
装饰器login_required将游客身份引导至登录页面,登录成功后跳转到目的页面 url.py path('login/',views.login), path('home/',views.hom ...
- Scala 函数入门之过程、lazy值和异常
Scala 过程 在Scala中,定义函数时,如果函数体直接包裹在了花括号里面,而没有使用=连接,则函数的返回值类型就是Unit.这样的函数就被称之为过程.过程通常用于不需要返回值的函数. 过程还有 ...
- 最详细的Android SDK下载安装及配置教程
文章转载与:https://blog.csdn.net/dr_neo/article/details/49870587 最近Neo突发神经,想要将学过的一些计算机视觉.机器学习中的算法都放到移动设备上 ...
- 3.02定义常量之const
[注:本程序验证是使用vs2013版] #include <stdio.h> #include <stdlib.h> #include <string.h> #pr ...