JaveScript之CSS变量

大概是CSS3吧,出了一个叫CSS变量的东西，也叫自定义属性，还是比较有用的东东，可以用JavaScript灵活控制，变量作用

我们来实现一个div跟随鼠标滚动的小东西用来说明如何自定义变量

:root{//全局变量
              --mouse-x: 0px;
              --mouse-y: 0px;
        } 
        .mover{
             
              width: 100px;
              height: 100px;
              background:lightblue;
        }

HTML代码如下：

<div class="mover"></div>

JavaScript代码，我们来写一段监听，处理变量值

            let root = document.documentElement
                root.addEventListener('mousemove', e => {
                root.style.setProperty('--mouse-x', e.clientX + 'px')
                root.style.setProperty('--mouse-y', e.clientY + 'px')
          })

这样就实现了我们想要的效果，当然啦，如果用JQ可能更简便些。

$(document).mousemove(function(e){
            $('.mover').css({"margin-top":e.clientY+"px","margin-left":e.clientX+"px"}).text(e.clientX+","+e.clientY);
            //
        })

实现效果如下：