js总结(6.1)获取DOM的各个属性 补充部分

1.滚动条距离  

window.pageXOffset/pageYOffset

    IE8 : document.body/documentElement.scrollLeft/scrollTop(兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值)

   封装函数 解决兼容性问题   

  

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) {
            x : window.pageXoffset,
            y : window.pageYoffset
        }
        else{
            return {
                x : document.body.scrollLeft + document.documentElement.scrollLeft,
                y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>

    2.查看视口的尺寸 

    window.innerWidth/innerHeight 

       封装函数 解决兼容性问题

.

<script type="text/javascript">
    function getSViewportOffset() {
        if(window.innerWidth) {
            return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{
            if(document.compatMode ==="BackCompat") {
                return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{
                return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>

3、查看元素的几何尺寸:

domEle.getBoundingClientRect(); //(返回结果不是实时的)

4、查看元素的尺寸:

dom.offsetWidth,dom.offsetHeight.

5、查看元素的位置:

dom.offsetLeft,dom.offsetTop.

6.最终显示样式获取

window.getComputedStyle(div, null).width

 window.getComputedStyle(div,"after").width (获取div伪元素的样式)



原文地址:https://www.cnblogs.com/nice2018/p/9881121.html