javascript - How to insert variables in inline CSS rules with pure JavaScript?

Question

I am calculating the x variable earlier in the code and i want to insert that variable value in the inline style of the div, but it doesn't work, though it works perfectly if i insert constant like "100px".

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

Note: i want to get it working without using jquery because i am using only a couple of scripts on the website and it is useless to link a big library in my case.

Answer 1

如果您来这里是为了寻找如何设置内联样式中的CSS 变量，那么您可以：

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

Answer 2

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

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

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

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

Answer 3

我想你正在寻找这样的东西

var xx = 100
document.getElementById("block").style.width = xx+'px';