前端开发中的各种宽高整理
文档及其内容的视觉属性,包括布局框定位
、视区宽高
和元素滚动
一、获取可视区域的宽高
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;
五、几种属性的简单描述
-
clientWidth / clientHeigth 可视宽高
clientWidth (clientHeigth):元素客户区的大小,指的是元素内容及其边框所占的空间大小(多为视口大小)——【width+padding】/【height+padding】–<-<-<@均不包含子元素
-
offsetWidth / offsetHeigth 可视宽高
offsetWidth (offsetHeigth ) :偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距margin)【width+padding+border】/【height+paddding+border】–<-<-<@均不包含子元素
-
scrollWidth / scrollHeight 可视宽高
scrollWidth (scrollHeight) :滚动大小,指的是包含滚动内容的元素大小(元素的总的宽高度)【width+padding】【scrollTop+clientHeight】–<-<-<@均包含子元素内容,子元素定位,overflow:hidden。(如果没有隐藏部分,则相关的值应该等于clientWidth和clientHeight)
-
offsetParent定位父级
获取元素的最近的定位父级,如果没有定位父级则参考body (元素必须是定位元素)
-
offsetLeft / offsetTop
offsetLeft : 获取对象相对于offsetParent(left)位置
offsetTop : 获取对象相对于offsetParent(top)位置
//获取元素距离文档顶部的距离 var iTop = 0, obj = oDiv; while(obj) { iTop += obj.offsetTop; obj = obj.offsetParent; }
-
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();
六、元素方法
-
getBoundingClientRect()
:getBoundingClientRect()
: 得到矩形元素的界线,返回的是一个对象,包含top、right、bottom、left四个属性值,大小都是相对于浏览器窗口top、left的距离。返回的内容类似于:{top: 143, right: 1196, bottom: 165, left: 889}
;
-
scrollIntoView()
:obj.scrollIntoView()
让元素滚动到可视区域(HTML5标准
),参数true与浏览器对齐,false元素在窗口居中显示;
-
event.clientX / event.clientY : 相对于window,为鼠标相对于浏览器窗口的偏移量。
event.clientX
鼠标在文档的水平坐标;even.clientY
鼠标在文档的垂直坐标;
七、window视图属性
window.innnerWidth / window.innnerHeight 窗口的内部宽 / 高;不包括用户界面元素,比如窗框。