获取窗口属性/脚本化CSS

最新推荐文章于 2023-02-25 15:00:42 发布

浅浅海鸥

最新推荐文章于 2023-02-25 15:00:42 发布

阅读量146

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Sunset_Sunshine/article/details/115616943

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

获取窗口属性

查看滚动条的滚动距离

window.pageXOffset window.pageYOffset (IE8及以下不兼容)
document.body.scrollLeft/Top document.documentElenment.scrollLeft/Top

兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值

封装兼容性方法，求滚动轮滚动距离 getScrollOffset()

    function getScrollOffset(){
        if(window.pageXOffset){
            return {
                x : window.pageXOffset,
                y : window.pageOYffset
            }
        }else{
            return {
                x : document.body.scrollLeft + document.documentElement.scrollLeft,
                y : ocument.body.scrollTop + document.documentElement.scrollTop
            }
        }
    }

查看视口的尺寸

window.innerWidth/innerHeight (IE8及以下不兼容)
document.documentElement.clientWidth/clientHeight （标准模式下。任意浏览器都兼容）
document.body.clientWidth/clientHeight (怪异模式下的浏览器)
封装方法返回浏览器视口尺寸 getViewportOffset()

       function getViewportOffset(){
            if(window.innerWidth){
                return {
                    w : window.innerWidth,
                    h : window.innerHeight
                }
            }else{
                if(document.compatMode === 'BackCompat'){
                    return {
                        w : document.body.clientWidth,
                        h : document.body.clientHeight
                    }
                }else{
                    return {
                        w : document.documentElement.cilentWidth,
                        h : document.documentElement.cilentHeight
                    }
                }
            }
        }

查看元素的尺寸

dom.offsetWidth dom.offsetHeight

查看元素位置

dom.offsetLeft dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标，对于有定位父级的元素，返回相对于最近的有定位的父级的坐标
dom.offsetParent 返回最近的有定位的父级，若无返回body body.offsetParent 返回null

让滚动条滚动

window 上有三个方法 scroll() scrollTo() 这连个方法一样 scrollBy()
三个方法功能类似，用法都是将X,Y坐标传入，即实现让滚动轮滚动到当前位置
区别scrollBy会在之前的数据基础上做累加

脚本化CSS

读写元素CSS属性

dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性前面应加css
复合属性必须拆解，组合单词变成小驼峰式写法
写入的值必须是字符串格式

查询计算样式

window,getComputedStyle(ele,null); null 可以传入伪元素
计算样式只读
返回的计算样式的值都是绝对值，没有相对单位
IE8 及以下不兼容
IE独有属性 ele.currentStyle

计算样式只读返回的计算样式的值不是经过转换的绝对值

封装函数

    function getStyle(ele,prop){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[prop];
            }else{
                return ele.currentStyle[prop];
            }
        }

原文地址：https://www.qianqianhaiou.cn/index.php/archives/91/