js-获取DOM尺寸位置
Posted 陈皮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-获取DOM尺寸位置相关的知识，希望对你有一定的参考价值。
获取DOM尺寸、位置
查看滚动条的滚动位置
- window.pageXOffset / window.pageYOffset(IE8及其以下版本不支持)
- document.body/documentElement.scrollLeft/scrollTop
- 兼容性比较混乱，使用时通常取两个属性值相加，因为不可能存在两个同时有值。
- 封装兼容性方法getScrollOffset():
function getScrollOffset(){
if(window.pageXOffset){
return{
x:window.pageXOffset,
y:window.pageYOffset
}
}else{
return{
x:document.documentElement.scrollLeft,
y:document.documentElement.scrollTop
}
}
}查看可视化窗口的尺寸
- window.innerWidth/innerHeight
- IE8及其以下版本不兼容
- document.documentElement.clientWidth/clientHeight
- 标准模式下，任意浏览器兼容
- document.body.clientWidth/clientHeight
- 适合怪异(混杂)模式下浏览器
- 封装兼容性方法，getViewportOffset:
function getViewportOffset(){
if(window.innerHeight){
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
if(document.compatMode == 1){
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeght
}
}else{
return{
width:document.body.clientWidth,
height:document.body.clientHeght
}
}
}
}PS:
- <!DOCTYPE html>限定了浏览器的渲染模式为标准模式，如果在Html文件删去这一句代码，则采用怪异(混杂)模式。
- 标准模式下，网页按照现行的浏览器版本渲染；
- 怪异模式下，网页会选择浏览器版本向后兼容的方式渲染。
查看元素的几何尺寸
- domEle.getBoundingClientRect();
- 兼容性很好。
- 返回的是一个对象，里面包括该元素的bottom,left,top right（bottom,left表示元素左下角坐标X,y值）；width,height（在老版本IE浏览器中不兼容）。
- 返回的结果并不是实时的。
查看元素的尺寸
- domEle.offsetWidth, domELe.offHeight
查看元素的位置
- domEle.offsetLeft,domEle.offTop
- 对于无定位父级的元素，返回相对于文档的位置；对于有定位父级的元素，返回相对于最近的有定位父级元素的位置。
- domEle.offsetPerent
- 返回最近的有定位的父级元素，如果没有就返回body;body.offsetParent为null.
让滚动条滚动
- window上有三个方法：scroll(),scrollTo(); scrollBy()
- 三个方法的功能类似，都是在括号里面传入x,y的值。
- 区别：前两个都是滚动到x,y坐标；scrollBy(),是在之前的基本数据上做累加。
以上是关于js-获取DOM尺寸位置的主要内容，如果未能解决你的问题，请参考以下文章