在 css 中使用数据属性

Question

嗨，我正在用 vanila js 制作架子鼓 我想在按下键盘时将边框颜色更改为与键盘对应的颜色。 这是问题 我必须在 css 中使用 data-* 属性而不在 js 代码中使用 div.style 但我不知道该怎么做 请帮我 这是我的代码

这是我的 html

<content>
      <div class="keys">
        <div class="key" data-key="a" data-color="red">
          <kbd>A</kbd><span>BOOM</span>
        </div>
        <div class="key" data-key="s" data-color="orange">
          <kbd>S</kbd><span>CLAP</span>
        </div>
        <div class="key" data-key="d" data-color="yellow">
          <kbd>D</kbd><span>HIHAT</span>
        </div>
        <div class="key" data-key="f" data-color="green">
          <kbd>F</kbd><span>KICK</span>
        </div>
        <div class="key" data-key="g" data-color="blue">
          <kbd>G</kbd><span>OPENHAT</span>
        </div>
        <div class="key" data-key="h" data-color="navy">
          <kbd>H</kbd><span>RIDE</span>
        </div>
        <div class="key" data-key="j" data-color="purple">
          <kbd>J</kbd><span>SNARE</span>
        </div>
        <div class="key" data-key="k" data-color="lightcoral">
          <kbd>K</kbd><span>TINK</span>
        </div>
        <div class="key" data-key="l" data-color="lightblue">
          <kbd>L</kbd><span>TOM</span>
        </div>
      </div>
    </content>

这是我的 js 代码

function pressed(event) {
  const div = document.querySelector(`.key[data-key="${event.key}"]`);
  const sound = document.querySelector(`audio[data-key="${event.key}"]`);
  if (!event.repeat) {
    div && div.classList.add("pressed");
    sound.currentTime = 0;
    sound.play();
  }
}

function up(event) {
  const div = document.querySelector(`.key[data-key="${event.key}"]`);
  div && div.classList.remove("pressed");
}

window.addEventListener("keydown", pressed);
window.addEventListener("keyup", up);

最重要的事 我的 CSS 文件

.pressed[data-key="a"] {
  border-color: red;
}
.pressed[data-key="s"] {
  border-color: orange;
}
.pressed[data-key="d"] {
  border-color: yellow;
}
.pressed[data-key="f"] {
  border-color: green;
}
.pressed[data-key="g"] {
  border-color: blue;
}
.pressed[data-key="h"] {
  border-color: navy;
}
.pressed[data-key="j"] {
  border-color: purple;
}
.pressed[data-key="k"] {
  border-color: lightcoral;
}
.pressed[data-key="l"] {
  border-color: lightblue;
}

我想简化那个按下的类（不重复按下的类） 类似 .pressed(data-color variable){ border-color: (data-color-variable) } 我不能在此代码中使用任何库

我试图将数据颜色值作为变量从 html 文件获取到 css 文件但失败了......

最重要的条件是我不应该在 js 代码中使用 div.style。我需要在 javascript 中编写不直接接触样式的代码

Answer 1

在你的 html 中你需要添加一个你在你的 js 中引用的音频标签，我已经为键 a 完成了

<content>
  <div class="keys">
    <div class="key" data-key="a" data-color="red">
  <kbd>A</kbd><span>BOOM</span>
  <audio data-key="a" controls>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
  </audio>
</div>
    <div class="key" data-key="s" data-color="orange">
      <kbd>S</kbd><span>CLAP</span>
    </div>
    <div class="key" data-key="d" data-color="yellow">
      <kbd>D</kbd><span>HIHAT</span>
    </div>
    <div class="key" data-key="f" data-color="green">
      <kbd>F</kbd><span>KICK</span>
    </div>
    <div class="key" data-key="g" data-color="blue">
      <kbd>G</kbd><span>OPENHAT</span>
    </div>
    <div class="key" data-key="h" data-color="navy">
      <kbd>H</kbd><span>RIDE</span>
    </div>
    <div class="key" data-key="j" data-color="purple">
      <kbd>J</kbd><span>SNARE</span>
    </div>
    <div class="key" data-key="k" data-color="lightcoral">
      <kbd>K</kbd><span>TINK</span>
    </div>
    <div class="key" data-key="l" data-color="lightblue">
      <kbd>L</kbd><span>TOM</span>
    </div>
  </div>
</content>

这是你的js有点修改

    function pressed(event) {
  const div = document.querySelector(`.key[data-key="${event.key}"]`);
  const sound = document.querySelector(`audio[data-key="${event.key}"]`);
  if (!event.repeat) {
    div && div.classList.add("pressed");
    div.style.setProperty('--color', div.getAttribute('data-color'));
    sound.currentTime = 0;
    sound.play();
  }
}

function up(event) {
  const div = document.querySelector(`.key[data-key="${event.key}"]`);
  div && div.classList.remove("pressed");
  div.style.removeProperty('--color');
}


window.addEventListener("keydown", pressed);
window.addEventListener("keyup", up);

你的 CSS 你应该可以这样写

    .key {
  /* other styles */
  border: 1px solid black;
}

.key.pressed {
  --color: attr(data-color);
  border-color: var(--color);
}

audio {
  display: none;
}