document.getElementsbyID和document.stylesheets [0] .rules [0]之间的JS有什么区别

Question

我正在尝试获取Mouse X，Y并将它们设置为my.css文件的自定义值

:root{
--mouse-x:0px;
}

在ejs文件中，它将加载css文件<link ~ my.css id="mcss"> 和

<script>
var el = document.getElementByID('mcss');
<--Get Mouse X, save to var x-->
el.style.setProperty('--mouse-x',x+"px");
</script>

但是效果不佳 当我尝试使用document.stylesheets [0] .rules [0]时，效果很好。 有什么区别？