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尺寸位置的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小

十八DOM元素尺寸和位置

DOM中获取元素尺寸和位置常用的API

JavaScript获取DOM元素位置和尺寸