事件的缘起是我根据https://www.bilibili.com/video/BV1Jp4y1y75i?t=570
这一视频，该视频实现了鼠标进入元素的一种特效。原作者使用了jQuery，我在用classList重写时，发现了一个值得注意的点。

const con = document.querySelector('.container');
  let isIn = true;
  let isOut = false;
  var span;
  con.addEventListener('mouseenter',(e)=>{
    if(isIn){
      let inx = e.clientX-e.target.offsetLeft;
      let iny = e.clientY-e.target.offsetTop;

      let el = document.createElement('span');
      el.style.left = inx+'px';
      el.style.top = iny+'px';
      con.appendChild(el);
      span = document.querySelector('.container span');
      console.log(span.style.left);
      span.classList.remove('out');
      span.classList.add('in');
      console.log(span.style.left);
      isIn = false;
      isOut = true;
    }
  })

在使用这一段js代码设置完span的样式后，发现classList的left与top属性没有起效，好奇的我又去自己做了几个实验（小实验，简单的classList.add），发现classList添加的属性有时覆盖原来属性有时不覆盖，那么这究竟是为啥呢。

参考1

经过多方查找（瞎找），感觉这跟css优先级有关
https://juejin.im/post/6844903709772611592
此为掘金上css优先级的文章
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2

MDN参考

参考2

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style
MDN关于.style属性的说明
https://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/
旭哥博客关于classList方法的解释

总结

根据以上的两个参考，classList.add方法就是给元素加了个css标签

<span></span>
//classList.add('in')
<span class="in"></span>

而.style设置相当于

<span style="top:???px; left:???px;">

即内联样式，而内联样式有最高的css优先度，故覆盖了之后的in样式
学到了.style是一种很好的设置元素属性的方法。
破案