说明,本文全部内容都基于各浏览器的标准渲染模式。也就是在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获取页面的各种坐标汇总的更多相关文章

  1. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  2. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  3. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  4. javascript 获取页面的高度及滚动条的位置的代码

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

  5. 用 Javascript 获取页面大小、窗口大小和滚动条位置

    页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...

  6. 利用JavaScript获取页面文档内容

    JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html ...

  7. javascript获取页面文档内容

    <html> <head> <title>JavaScript基础</title> </head> <body> <p&g ...

  8. javascript 获取页面尺寸/位置

    ************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...

  9. Javascript 获取页面高度(多种浏览器)

    //2015年8月13日11:00:50 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: d ...

随机推荐

  1. [计算机视觉][神经网络与深度学习]SSD安装及其训练教程

    SSD的安装 在home目录下,获取SSD的代码,下载完成后有一个caffe文件夹 git clone https://github.com/weiliu89/caffe.git cd caffe g ...

  2. UE项目打包

    https://docs.unrealengine.com/zh-CN/Engine/Basics/Projects/Packaging/index.html 必须先对虚幻项目进行正确打包,之后才能将 ...

  3. [十一集训] Day1 (2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018))

    A Altruistic Amphibians 原题 题目大意: n只青蛙在高度为d的井中,每只有跳跃距离.重量和高度,每只青蛙可以借助跳到别的青蛙的背上而跳出井,每只青蛙能承受的最大重量是自身重量, ...

  4. CF1033C Permutation Game

    题目描述 输入输出样例 输入 #1 输出 #1 BAAAABAB 输入 #2 输出 #2 ABAAAABBBAABAAB 数据范围 1<=n<=1e5,1<=ai<=n 解题思 ...

  5. Python开发【源码剖析】 List对象

    前言 本文探讨的Python版本为2.7.16,可从官网上下载,把压缩包Python-2.7.16.tgz解压到本地即可 需要基本C语言的知识(要看的懂) PyListObject对象 PyListO ...

  6. MySQL Group Replication的安装部署

    一.简介 这次给大家介绍下MySQL官方最新版本5.7.17中GA的新功能 Group Replication . Group Replication是一种可用于实现容错系统的技术.复制组是一组通过消 ...

  7. git重置账号密码

    1.打开控制面板(快捷打开win+R,输入control) 2.点击打开用户账户 3.点击凭据管理器 4.点击windows凭据删除你的git凭据即可

  8. 上传自己的 NuGet 包

    参考:https://blog.csdn.net/gulijiang2008/article/details/41724927 STEP 1:在NuGet上注册并获取API Key STEP 2:下载 ...

  9. 最新大型三甲医疗信息管理系统软件C#体检系统成熟PEIS源码BS架构NET网络版本

    查看体检系统演示 本源码是成熟在用大型医疗信息管理系统体检系统PEIS源码BS架构,开发语言是 asp.net c#,数据库是sqlserver2008r2,开发工具vs2010. 功能模块: 1.前 ...

  10. 关于 Nginx的相关学习

    转自:https://www.cnblogs.com/wcwnina/category/1193394.html Nginx能做什么 ——反向代理 ——负载均衡 ——HTTP服务器(动静分离) ——正 ...