如何使用纯 JavaScript 在内联 CSS 规则中插入变量？

Question

我在代码的前面计算 x 变量，我想在 div 的内联样式中插入该变量值，但它不起作用，尽管如果我插入像“100px”这样的常量，它会完美地工作。

var x;  
document.getElementById("block").style.position = "fixed";  
document.getElementById("block").style.left = x;  

注意：我想让它在不使用 jquery 的情况下工作，因为我在网站上只使用了几个脚本，在我的情况下链接一个大库是没有用的。

Answer 1

如果您来这里寻找如何在内联样式中设置CSS 变量，请看这里：

element.style.setProperty("--my-var", jsVar + 4);

Answer 2

好吧，我还不能发表评论，但我以前遇到过类似的问题。

无需任何额外的代码，我就可以假设 x 是计算值并且它是一个数字。仅在左侧插入数字是无效的 css，因此您必须在将其分配给属性之前附加一个单位：

document.getElementById("block").style.left = x + 'px';

如果这解决了您的问题，那就太好了！否则，请发布您如何计算 xvar x;到 x 的赋值。