使用自定义属性变量时 CSS 属性不会改变答案

【问题标题】：CSS properties not changing when using custom property variables使用自定义属性变量时 CSS 属性不会改变
【发布时间】：2020-10-27 20:38:49
【问题描述】：

我对 CSS 很陌生，我正在尝试制作一个可以使用滑块更改宽度和高度的按钮，同时测试是否可以让 CSS 变量与 JS 一起使用，但我做不到

Javascript：

document.documentElement.style.cssText = "--zoom-button-width: 300"

CSS：

.zoomButton1 { width: var(--zoom-button-width); }

【问题讨论】：

相关：stackoverflow.com/a/49618941/8620333（你会发现如何使用 JS/jquery 调整 CSS 变量
您的值需要一个单位。 300 什么？ 300像素？ 300 英里？
是的，发完这个之后，我去测试了一些东西，我尝试了“--zoom-button-width: 300px”和“width: var(--zoom-button-width )px;"这些都不起作用
如果你想使用无单位属性相关的：stackoverflow.com/q/57666183/8620333

标签： javascript css

【解决方案1】：

神奇的线：

document.documentElement.style.setProperty('--zoom-button-width', '300px');

【讨论】：

我认为这行得通。我说想想，因为当我运行程序时，它会工作一瞬间，然后立即恢复。有一种可能，在代码的其他地方，我的朋友设置了盒子的大小（它是一个 colab），我不知道。

【解决方案2】：

好的，所以我找到了问题，但我仍然不知道是什么原因造成的。我正在经历一些事情，当我删除这段代码时，它就可以工作了。 'document.documentElement.style.cssText = "--top-bar-color: #313440"' 编辑：我将其切换为 'document.documentElement.style.setProperty("--top-bar-color","#313440")' 它奏效了。感谢您的帮助

【讨论】：

将 cssText 设置为一个整体将覆盖已应用于元素的所有样式，因此这很可能是那里发生的事情。