JS直接操作CSS如题今天公司要求做仿站练习的时候遇到一个问题:向下滑动一定距离后让盒子跟着页面移动而移动简单来说:只要

如题

今天公司要求做仿站练习的时候遇到一个问题:
向下滑动一定距离后让盒子跟着页面移动而移动
简单来说 : 只要当我滑过一定距离后,将position属性调整为fixed就可以了
我第一个想到的就是node.style,但有一个问题,那就是style属性只能获取到内联元素中的值而不能获取到CSS中的样式

通过查找,我找到了两个方法:

获取css中的样式
obj.currentStyle\['attr'](只兼容IE)
window.getComputedStyle(obj)\['attr'](IE8以上)

但注意了,虽然函数可以获取到css样式中的属性,但这个值是只读的,我们并不能直接去修改他,那该怎么办呢?
于是我将获取到的属性赋值给了内联样式,然后通过修改内联样式从而达到修改CSS属性的目的

附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body{
            height:10000px;
        }
        #a{
            position:absolute;
            top:300px;
        }
    </style>
</head>
<body>
    <div id='a'>
        aasdasd
    </div>
    <script>
        let a = document.getElementById('a')
        window.addEventListener('scroll',()=>{
            if(window.scrollY>500){
                a.style.position = window.getComputedStyle(a)['position']
                a.style.position = 'fixed'
            }
        })
    </script>
</body>
</html>

我是臭弟弟啊,真的是太菜了,希望能够帮到你Q~Q
加油,共勉