1）关于 pageX, clienX,offsetX,layerX

  • pageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化

  • clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

  • offsetX：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

  • layerX：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点，也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就相等。

2）关于元素尺寸、位置和溢出的更多信息

  • offsetWidth和offsetHeight只读属性：以css像素返回它的屏幕尺寸。返回尺寸包含元素的边框以内，出去外边距。（文档高）

  • offsetLeft和offsetTop属性：返回元素的X和Y坐标。offsetParent属性指定这个属性相对的父元素。

  • ClientWidth和clientHeight：类似offsetWidth和offsetHeight，不同的是不包含边框大小，只包含内边距以内。如果浏览器在内边距和边框之间添加了滚动条，还不会包含滚动条。注意，<i>和<code>和<span>这类内联元素，clientWidth和clientHeight总是返回0；document.documentElement.clientHeight 随着页面的缩放，值会变化。

  • clientLeft和clientTop属性：没什么用，返回内边距的外边缘和边框的外边缘之间水平距离和垂直距离。

  • scrollWidth和scrollHeight：内容+内边距+溢出。当无溢出时，和clientWidth和clientHeight相等。（包括隐藏的，为实际的内容区域高度）

  • scrollLeft和scrollTop：是滚动条位置。

3）查询元素的几何尺寸

  • 判断一个元素最简单的方法是调用它的getBoundingClientRect()方法。该方法在IE5中引入，而在现在所有浏览器中都实现了。返回一个有left  right top  bottom 等属性的对象。left top表示元素左上角的X和Y坐标，right bottom属性表示元素的右下角的X和Y坐标。

4）判断浏览器窗口滚动条的位置

  • 所有浏览器支持window.pageXOffset和window.pageYOffset. 除了IE8以下，所有支持scrollLeft和scrollTop;

  • document.compatMode // 有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下： ［BackCompat］Standards-compliant mode is not switched on. (Quirks Mode) ［CSS1Compat］ Standards-compliant mode is switched on. (Standards Mode)

5）设置鼠标滚动值

  • 方法一：scrollLeft和scrollTop属性可以用来设置浏览器滚动，如 document.body.scrollTop = 100；

  • 方法二：在jquery中，使用.scrollTop(value) 和 .scrollLeft() 来设置scrollTop的值。

相关DEMO展示：

1 document.getElementsByClassName("js-new-issue-button")[0].style.width
2 // "84px" 内容区域
3 document.getElementsByClassName("js-new-issue-button")[0].clientWidth
4 // 104 内边距以内 
5 $(".w_content .product_piece img").css("width");
6 // "165px"
7 $(".w_content .product_piece img").width();
8 // 165

//获取元素的纵坐标 巧妙回调

1 function getTop(e){
2     var offset=e.offsetTop;
3     if(e.offsetParent!=null)
4         offset+=getTop(e.offsetParent);
5     return offset;
6 }

//获取元素的横坐标

1 function getLeft(e){
2     var offset=e.offsetLeft;
3     if(e.offsetParent!=null)
4         offset+=getLeft(e.offsetParent);
5     return offset;
6 }

获取高度时在iPad中遇到问题：

要做自适应，并且随着屏幕颠来倒去改变菜单高度的效果，于是在ipad上遇到了纠结的问题：

屏幕工作区高度：window.screen.height（在ipad中，旋转屏幕时，该值不会发生变化）

屏幕工作区宽度：window.screen.width（在ipad中，旋转屏幕时，该值不会发生变化）

屏幕可用工作区高度：window.screen.availHeight （在ipad中，旋转屏幕时，该值不会发生变化）
屏幕可用工作区宽度：window.screen.availWidth（在ipad中，旋转屏幕时，该值不会发生变化）

$(window).height()   // 在ipad中获取的高度会与pc上预期的不一样，有一个（ 屏幕工作区高度 - 屏幕可用工作区高度）的偏差
$(window).width()    // 在ipad中获取的宽度会与pc上预期的不一样，有一个（ 屏幕工作区宽度 - 屏幕可用工作区宽度）的偏差

在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：

document.body.offsetWidth

document.body.offsetHeight

在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：

document.documentElement.clientWidth

document.documentElement.clientHeight

IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：

window.innerWidth

window.innerHeight

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名的更多相关文章

  1. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  2. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  3. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  4. Js获取操作系统版本 && 获得浏览器版本

    //利用原生Js获取操作系统版本function getOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.plat ...

  5. Js获取宽高度的归纳集锦总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种.属性根据不同的兼容性也分为五种 window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关 window.inner ...

  6. Js获取宽高度的归纳总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种. window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 win ...

  7. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  8. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  9. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

随机推荐

  1. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 2 Keynote: Miguel de Icaza

    美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.8 是第二天, Miguel de Icaza 做Keynote,Miguel 在波士顿Xa ...

  2. github概念和实战

    fork: 通过fork操作,你将拥有了别人创建的repo的ownership,但是url却变成了/youraccount/repo,这时你将可以做git push操作 clone: 该命令是直接将r ...

  3. RHEL7单独安装图形X11

    RHEL7 默认是最小化安装(Minimal Install),没有图形界面,我们应该选择Server with GUI.若已错过此步骤,我们采用以下方式补充安装GUI界面. # yum group ...

  4. php实现无限级树型菜单（函数递归算法）

    首先到数据库取数据,放到一个数组,然后把数据转化为一个树型状的数组,最后把这个树型状的数组转为html代码.也可以将第二步和第三步合为一步. 详细如下:1.数据库设计:脚本如下:CREATE TABL ...

  5. UVALIVE 5893 计算几何+搜索

    题意:很复杂的题意,我描述不清楚. 题目链接:http://acm.bnu.edu.cn/bnuoj/contest_show.php?cid=3033#problem/33526 大致是,给定一个起 ...

  6. Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列

    Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列

  7. xenserver使用快照创建虚拟机，提示eth0 has different mac错误

    这个报错的意思就是说mac地址错误 我们对比后可以发现,用快照创建的虚拟机和原虚拟机的eth0那个配置文件的 mac地址是一样的,因为mac地址具有唯一性,所以就报这个错,无法配置ip上网 解决方法很 ...

  8. java rpc

    一.简介 Hessian和Burlap是由Caucho Technology提供的基于HTTP协议的轻量级远程服务解决方案.他们都致力于借助尽可能简单那的API和通信协议来简化Web服务.    He ...

  9. SQL Server Extended Events 进阶 3：使用Extended Events UI

    开始采用Extended Events 最大的阻碍之一是需要使用Xquery和XML知识用来分析数据.创建和运行会话可以用T-SQL完成,但是无论使用什么目标,数据都会被转换为XML.这个限制在SQL ...

  10. 消息队列实现回射客户/服务器和 msgsnd、msgrcv 函数

    一.msgsnd 和 msgrcv 函数 #include <sys/types.h>   #include <sys/ipc.h>   #include <sys/ms ...