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. DailyRollingFileAppender的使用

    DailyRollingFileAppender是日志记录软件包Log4J中的一个Appender,它能够按一定的频度滚动日志记录文件. 如果您不熟悉Log4J,建议阅读一下 使用Log4j进行日志记 ...

  2. 【活动】写#听云#原创博文 赢取iPhone 6超级大奖

    移动应用的使用量和重要性与日俱增,用户体验的要求也越来越高.与桌面程序相比,移动应用耗电小,速度慢,但手机用户却希望享受到与桌面程序同样的加载速度.那么如何发现移动应用的性能黑洞,优化移动应用性能,这 ...

  3. Java 模板引擎 jetbrick-template

    jetbrick-template 是一个新一代 Java 模板引擎,具有高性能和高扩展性. 适合于动态 HTML 页面输出或者代码生成,可替代 JSP 页面或者 Velocity 等模板. 指令和 ...

  4. Qt之QAbstractItemView视图项拖拽(一)

    一.需求说明 最近在搞视图项的拖拽,也上网查了一些资料,好多的文档都是一样的,只是被不通的网站所收录了(也有可能是被爬过去的,不明所以),不过也有一些文档写的不错,不过就是太简易,都是点睛之笔,总之功 ...

  5. HDU5092——Seam Carving(动态规划+回溯)(2014上海邀请赛重现)

    Seam Carving DescriptionFish likes to take photo with his friends. Several days ago, he found that s ...

  6. ASP.NET MVC 4 让数据库自动迁移

    今天实际测试了下这个方法,可以保持数据库与实体类同步,同时不会出现数据库迁移的提示.但是只能更改实体类来改变数据库,而不能改数据库来改变实体类.所以这才是Code frist,如果通过改数据库表来改动 ...

  7. OC中-方法到底是如何使用的?

    方法:方法是Objective-C独有的一种结构,只能在Objective-C中声明.定义和使用,C语言不能声明.定义和使用. 1.类方法以+号开头,对象方法以-号开头+ (void) init;  ...

  8. PowerDesigner 的mysql PDM 的COMMENT注释

    PowerDesigner 的mysql PDM 的COMMENT注释 2012-11-01 15:38 4447人阅读 评论(0) 举报 分类: 数据库相关(7) PowerDesigner 的my ...

  9. 有趣的冷知识:编程中Foo, Bar 到底什么意思?

    转自:编程中Foo, Bar 到底什么意思? 1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词 ...

  10. 指针*p,p,&p等辨别

    #include<iostream> #include<iomanip> #include<cmath> using namespace std; int main ...