使用 JS 更改 CSS 以获得切换类答案

【问题标题】：Change CSS with JS for a toggled class使用 JS 更改 CSS 以获得切换类
【发布时间】：2021-11-27 23:07:11
【问题描述】：

我现在正在学习 JS，我正在尝试做以下事情：

我正在创建一个 html 网格，每个单元格都标有一个 cell 类，它没有给它一个背景颜色。当我标记单元格（即通过单击）时，JS 代码会为其添加一个 colored 类，从而为其赋予背景色：

.colored{
    background-color: black;
}

现在，我正试图向前迈出一步，并通过使用 HTML 的输入（类型颜色）让用户控制单元格的背景颜色。我正在获取用户选择的颜色，然后我想更改单元格的背景颜色 - 这是我的问题。

我想获取 colored 类的 css 规则并将其更改为用户提供的值。我尝试通过使用（colorPicker 是输入元素）来更改它：

colorPicker.addEventListener('input', (e) => {
        cells.forEach((cell) => {
            if(cell.classList.contains('colored')) 
                cell.style.backgroundColor = e.target.value;
        })
    })

以上内容仅更改当前具有colored 类的单元格，而不是colored 规则集本身 - 因此稍后将被标记的单元格不会发生颜色变化。

我遇到过使用document.styleSheets 直接更改css 规则集的方法，但我正在寻找一种更优雅的方法来更改colored 类css。

有这样的方法吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

您可以使用CSS variables 实现相同的行为。但是，您可以更改属性的值，而不是更改特定元素的样式。

一个简单的版本可以这样使用：

const colorPicker = document.querySelector('.color-picker');

colorPicker.addEventListener('input', (event) => {
  // Retrieve chosen color
  const color = event.target.value;
  
  // Overwrite CSS variable
  document.documentElement.style.setProperty('--color-red', color);
}, false);

:root {
  --color-red: #ff0000;
}

.colored {
  background-color: var(--color-red);
  margin: 0 0 0.25em;
}

<div class="colored">Am I red?</div>
<div class="colored">Should I be red?</div>
<div class="colored">Red is my color?</div>
<div class="colored">All I want is red?</div>
<div class="colored">Roses are red?</div>

<input type="color" class="color-picker" />

【讨论】：