前端开发中的各种宽高整理

前端开发中的各种宽高整理

文档及其内容的视觉属性，包括布局框定位、视区宽高和元素滚动

一、获取可视区域的宽高

• document.documentElement.clientWIdth
• document.documentElement.clientHeight

可以获取文档没有内容时的宽高度，若没有定义W3C的标准，那么在IE浏览器下二者的值均为0；

二、获取滚动条滚动距离

1、主流浏览器中，用下面的代码获取值

• document.documentElement.scrollTop
• document.documentElement.scrollLeft

2、搜狗浏览器、360浏览器、IE浏览器中，用下面的代码获取

• document.body.scrollTop
• document.body.scrollLeft

3、兼容的写法

• var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);
• var scrollLeft = document.body.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset;

注意：IE浏览器中获取时需要添加一个定时器，不然取到的值总是0。

setTimeout( function () { console.log( document.body.scrollTop ); } , 100 );

三、 元素的内容宽高

​ 获取所有子孙元素中最大值作为内容高

• obj.scrollHeight;
• obj.scrollWidth;

四、只获取子元素宽高作为内容宽高

• document.documentElement.offsetWidth;
• document.documentElement.offsetHeigth;

五、几种属性的简单描述

1. clientWidth / clientHeigth 可视宽高

   clientWidth (clientHeigth)：元素客户区的大小，指的是元素内容及其边框所占的空间大小（多为视口大小）——【width+padding】/【height+padding】–<-<-<@均不包含子元素

   ---

2. offsetWidth / offsetHeigth 可视宽高

   offsetWidth (offsetHeigth ) ：偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距margin）【width+padding+border】/【height+paddding+border】–<-<-<@均不包含子元素

   ---

3. scrollWidth / scrollHeight 可视宽高

   scrollWidth (scrollHeight) ：滚动大小，指的是包含滚动内容的元素大小（元素的总的宽高度）【width+padding】【scrollTop+clientHeight】–<-<-<@均包含子元素内容，子元素定位，overflow：hidden。（如果没有隐藏部分，则相关的值应该等于clientWidth和clientHeight）

   ---

4. offsetParent定位父级

   获取元素的最近的定位父级，如果没有定位父级则参考body （元素必须是定位元素）

   ---

5. offsetLeft / offsetTop

   offsetLeft ： 获取对象相对于offsetParent（left）位置

   offsetTop ： 获取对象相对于offsetParent（top）位置

   //获取元素距离文档顶部的距离
   var iTop = 0,
   	obj = oDiv;
   while(obj) {
       iTop += obj.offsetTop;
       obj = obj.offsetParent;
   }
   

---

6. scrollLeft / scrollTop 滚动宽 / 滚动高

   可读可写，有内容溢出元素才有效果

   obj.scrollLeft ： 元素X轴（横向）滚动的距离

   obj.scrollTop ： 元素Y轴（纵向）滚动的高度

   注意：设置时不能加px单位，否则会出错！！！

   eg： document.getElementsByTagName(“body”)[0].scrollTop = 100;

   Chrome浏览器对document.documentElement.scrollTop的识别会出现误差。

   ！！！IE浏览器和firefox浏览器之下用document.documentElement.scrollTop获取，chrome浏览器下通过document.body.scrollTop 获取

   var box = document.getELementById("box"),
   	num = 0;
   function fn() {
       box.scrollTop = ++num;
       document.title = box.scrollTop;
       requestAnimation(fn);
   };
   fn();
   

---

六、元素方法

1. getBoundingClientRect() :

   getBoundingClientRect() ： 得到矩形元素的界线，返回的是一个对象，包含top、right、bottom、left四个属性值，大小都是相对于浏览器窗口top、left的距离。返回的内容类似于：{top: 143, right: 1196, bottom: 165, left: 889}；

   ---

2. scrollIntoView() :

   obj.scrollIntoView() 让元素滚动到可视区域（HTML5标准），参数true与浏览器对齐，false元素在窗口居中显示；

   ---

3. event.clientX / event.clientY ： 相对于window，为鼠标相对于浏览器窗口的偏移量。

   event.clientX鼠标在文档的水平坐标；

   even.clientY鼠标在文档的垂直坐标；

七、window视图属性

window.innnerWidth / window.innnerHeight 窗口的内部宽 / 高；不包括用户界面元素，比如窗框。