js使用变量改变css值

功能：点击某元素，并在点击位置生成一个Menu

思路：获取点击时鼠标绝对位置，将Menu的位置设在鼠标获取的位置

鉴于上一节，使用上面这个思路解决

当我兴致冲冲地把鼠标的位置存在了x、y里面，想通过

div.setAttribute('style','position:fixed;top:y;left:x;');

轻松解决时，发现并不行。于是就出现了这一节的话题：CSS中可以使用变量吗？

这个问题涉及到页面加载顺序，另一篇再补。

关于这个问题真的是反反复复啊

不支持到支持再到不支持又到支持，大家可以去搜索一下，我也整理不出什么有用的，只知道按照结构、表现、行为分离的原则是不应该支持。但2017年3月，微软宣布Edge浏览器将支持CSS变量，听说这一伟大的功能，所有主流浏览器都支持了。用法大概就是声明时前面加两条线(--)。

具体用法大家可以参考：

阮一峰的网络日志

但其实我这个问题很简单，虽然我不能通过传统方法在css中设置变量，但我可以在js中通过变量改变css中的值呀！

然后就非常简单了：

div.setAttribute('style','position:fixed;top:127px;left:450px;');div.style.top=y+"px";div.style.left=x+"px"

解决！千万不要忘记加"px"