using data attribute in css-CodePudding

hi i am making a drum kit with vanila js I want to make the border-color change to the color corresponding to the keyboard when I press the keyboard. here is the problem i have to use data-* attribute in css without using div.style in js code but i don't know what to do please help me here is my code

this is my html

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

and this is my js code

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);

most important thing my css file

.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;
}

i want to simplify that pressed class(without repeating the pressed class) something like .pressed(data-color variable){ border-color: (data-color-variable) } i cannot use any libraries in this code

i tried to get data-color value as variable from html file to css file but failed...

The most important condition is that i should not use div.style in js code. i need to write code that doesn't touch styles directly in javascript

CodePudding user response：

In your html you need to add an audio tag which you reference in your js, I've done it for key a

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

This is your js a bit modified

    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);

And your CSS you should be able to just write like this

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

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

audio {
  display: none;
}