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

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

本文关键字：规则 CSS 插入 变量 何使用 JavaScript      更新时间：2023-09-26

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

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

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

如果你来这里是为了了解如何在内联样式中设置CSS变量，那么你可以：

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

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

在没有任何额外代码的情况下，我可以假设x是计算值，它是一个数字。只在左边插入一个数字是无效的css，因此在将其分配给属性之前，必须将一个单元附加到它上：

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

如果这能解决你的问题，那就太好了！否则，请公布如何在var x;到x的赋值之间计算x。

我想你正在寻找类似的东西

var xx = 100
document.getElementById("block").style.width = xx+'px';
相关文章：