我打电话比你 讲左几句你就收线喇 你变左好多呀 点解唔同我倾落去 点解心不在焉呢 点解对我冷淡 点解 我讲乜野你都反应既呢 从你 你不停的追问 你痴情的态度 令我停停下脚步 还有你追求的心愿 我心曾想配合 但我难照做 这是你爱的控诉 还是爱的追讨 但我始终感觉到 此去没去路 我没有说不爱你 从未说不喜欢 但我心知此刻相爱 时机未到 个个边个黎架 讲左几耐呀 去左几多次街呀 有拖过手呀 点解唔介绍我识 有上过你屋企 有一齐听唱片呀 从你 你不停的追 你痴情的态度 令我停停下脚步 还有你追求的心愿 我心曾想配合但我难照做 这是你爱的控诉 还是爱的追讨 但我始终感觉到 此去没去路 我没有说不爱你 从未说不喜欢 但我不想只讲一句 无可奉告 最近在用原生的js来实现一些交互特效,写的时候发现这些宽度和高度的获取真的是太常用了
而且获取他们的方法不止一个两个,上网一搜发现有好多,看得我眼花缭乱的
于是我自己做了一个归纳,方便以后快速查阅

对于移动端,一般要统一初始化视口宽高缩放比例

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>


一、全局类的宽高获取:

屏幕分辨率宽度和高度的获取:

  • 宽度:window.screen.width
  • 高度:window.screen.height

屏幕可用工作区宽度和高度的获取:

  • 宽度:window.screen.availWidth
  • 高度:window.screen.availHeight

浏览器应用程序窗口宽度和高度的获取(整个浏览器程序):

  • 宽度:window.outerWidth
  • 高度:window.outerHeight

浏览器视口宽度和高度的获取(包括滚动条):

  • 宽度:window.innerWidth
  • 高度:window.innerHeight

浏览器视口宽度和高度的获取(不包括滚动条):

  • 宽度:document.documentElement.clientWidth
  • 高度:document.documentElement.clientHeight

文档实际内容宽度和高度的获取:

  • 宽度:document.body.clientWidth
  • 高度:document.body.clientHeight


二、DOM元素宽度和高度的获取
对于每个DOM元素,均有6个获取它们的宽高的方法

  • offsetWidth, offsetHeight: 分别负责获取DOM元素的宽度和高度,包括所有border和padding
  • clientWidth, clientHeight: 分别负责获取DOM元素的宽度和高度,不包括border和滚动条,但包括padding
  • scrollWidth, scrollHeight: 分别负责获取DOM元素的宽度和高度,如果有滚动条的话,会包括那些暂时在滚动区外不可见的内容。

具体情况如下图:


三、DOM元素位置的获取:

  • offsetTop, offsetLeft:分别负责获取元素相对于父元素的上偏移和左偏移
  • scrollTop, scrollLeft:分别负责获取元素相对于父元素的上滚动距离和左滚动距离
  • clientTop, clientLeft:分别负责获取元素的上、左两个border的厚度(这个其实不是获取元素位置的,之所以摆出来,是因为它容易跟前面两个混淆)

具体情况如下图:
201211040853289748.jpg

下面还有一张更加清晰的图:


四、通过getBoundingClientRect获取元素位置和大小
除了以上两种方法,目前在js中还有另一种方法也可以比较好的获取DOM元素的位置和大小,就是通过getBoundingClientRect方法来获取
该方法会返回一个DOMRect对象

var rect = dom.getBoundingClientRect();

然后通过该对象,可以获得以下属性:

  • rect.width 元素宽度
  • rect.height 元素高度
  • rect.left 元素左边相对于视口原点的横向X轴距离
  • rect.right 元素右边相对于视口原点的横向X轴距离
  • rect.top 元素顶部相对于视口原点的纵向Y轴距离
  • rect.bottom 元素底部相对于视口原点的纵向Y轴距离

具体情况如下图:


五、浏览器当前滚动位置的获取:

  • window.pageXoffset:获取当前浏览器横向滚动条的位置
  • window.pageYoffset:获取当前浏览器纵向滚动条的位置
  • window.scrollX:同pageXoffset,是pageXoffset的别名
  • window.scrollY:同pageYoffset,是pageYoffset的别名

注:在IE9以前,不支持该方法,适用于IE8及更早版本的IE浏览器的方法如下:

  • document.documentElement.scrollTop:获取当前浏览器垂直滚动条的位置
  • document.documentElement.scrollLeft:获取当前浏览器水平滚动条的位置


六、鼠标位置的获取:

  • offsetX, offsetY:获取鼠标当前位置相对于当前焦点元素的横向X轴距离和纵向Y轴距离
  • clientX, clientY:获取鼠标当前位置相对于浏览器视口原点的横向X轴距离和纵向Y轴距离
  • pageX, pageY:获取鼠标当前位置相对于浏览器页面文档流原点的横向X轴距离和纵向Y轴距离
  • screenX, screenY:获取鼠标当前位置相对于屏幕原点的横向X轴距离和纵向Y轴距离

具体情况如下图:


下面这张图更好的阐释了pageX和pageY: