Home > Back-end >  using data attribute in css
using data attribute in css

Time:01-09

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;
}
  • Related