使用 javascript 更改 css 类属性值

Question

我想动态更改 css 类的属性之一的值

这是我的场景：

我有许多元素使用一个类，而不是获取所有元素并循环它们并应用样式，我想更改已经应用于它们的类属性之一的值。例如

.prodName {
  max-width: 270px;
  display: block;
}

上面的类被许多元素使用，我想改变该类的属性之一，例如

.prodName {
  max-width: 350px <---
  display: block;
}

javascript中有没有简单的方法可以做到这一点？

在我发布这个问题之前，我已经进行了搜索，但没有找到任何简单有用的东西。预先感谢伸出的援助之手。

Answer 1

对于这种情况，您可以使用 CSS 变量。

const root = document.querySelector(':root');

function play() {
  root.style.setProperty('--size', '300px');
}

:root {
  --size: 100px;
}

.container {
  background-color: red;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
}

<div class="container" onclick="play()"></div>

上述方法的唯一问题是旧版浏览器的支持。如果您必须支持 IE 以及不支持 CSS 变量的旧版浏览器，您可以通过向 body/parent 容器添加一个类来解决此问题。

function play() {
  document.body.classList.add('large')
}

.container {
  background-color: red;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.large .container {
  width: 300px;
  height: 300px;
}

<div class="container" onclick="play()"></div>