使用 javascript 更改 css 类属性值答案

【问题标题】：Change css class attribute values using javascript使用 javascript 更改 css 类属性值
【发布时间】：2022-01-02 19:56:52
【问题描述】：

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

这是我的场景：

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

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

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

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

在javascript中有什么简单的方法吗？

在我发布这个问题之前，我已经搜索过，但没有找到任何简单有用的东西。在此先感谢您的帮助。

【问题讨论】：

最好添加 .prodName.larger { max-width: 350px; } 之类的内容。并将其应用于您的元素。
在 JavaScript 中执行 element.style.maxWidth = 350px; 或在 css 中执行 .prodName--larger { max-width: 350px; }
这些技巧我已经知道了，但是这个类名的元素非常多，所以最好是根据条件添加类，或者自己更改css类属性。

【解决方案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;
}

&lt;div class="container" onclick="play()"&gt;&lt;/div&gt;

上述方法的唯一问题是在旧浏览器中的支持。如果你必须支持 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;
}

&lt;div class="container" onclick="play()"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

向 CSS 添加新类：

.mw350 {
  max-width: 350px;
}

然后在 JS 中为元素添加新的类：

document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'

【讨论】：

【解决方案3】：

如果您要控制 ts 的 css 类/属性更改，可能使用函数或 var 更改，您可能想要使用 ngClass:https://www.freecodecamp.org/news/angular-ngclass-example/ 并在您想要的位置拥有所有逻辑，易于访问。

【讨论】：