キーを押したら色が変わるようにしたい

Question

何かキーを押す（keydownする）とテキストの文字が変わり，キーを放す（keyupする）と元に戻るような処理をしたいです．

HTMLの表示です↓

<div id="running" style="padding: 10px; margin-bottom: 10px; width: 100px; border: 1px solid #333333;">実行中</div>

今はカーソルが当たると以下のcssに変わるようになっていますが，これをkeydown時に処理したいです．

#running:hover{
  background-color: red;
  color: white;
  font-weight: bold;
}

keydownとkeyup処理はjavascriptで書いています．

var flag=true;
  document.onkeydown = function (evt){
      if (!evt) e = window.event;
      if(flag){
        console.log("キーが押された");
        for(var key in keygainpair){
          console.log("keydown before: "+keygainpair[key].gain.value);
          keygainpair[key].gain.value=beforevalue[key];
          console.log("keydown after: "+keygainpair[key].gain.value);
        }
      }
      flag=false;
    }

  //キーアップ処理
    document.onkeyup=function (evt){
      if (!evt) e = window.event;
      console.log("キーが離された");
      flag=true;
      for(var key in keygainpair){
        console.log("keyup before: "+keygainpair[key].gain.value);
        keygainpair[key].gain.value=0.5;
        console.log("keyup after: "+keygainpair[key].gain.value);
      }
    }

Answer 1

pressingというstyleクラスを作り、押されたときに対象のタグにpressingクラスを付与、離されたときにpressingクラスを削除、という流れでいかがでしょうか。

#running.pressing {
  background-color: red;
  color: white;
  font-weight: bold;
}

document.onkeydown = function (evt){
    // 既存の処理中略
    document.getElementById("running").classList.add("pressing");
}
document.onkeyup = function (evt){
    // 既存の処理中略
    document.getElementById("running").classList.remove("pressing");
}

jsFiddleによる動作サンプル
https://jsfiddle.net/2obLr4or/

Comments

[退会済みユーザー]

ありがとうございました．解決しました！

Answer 2

classでいいかとおもいますが一応他の影響がすくなdata-*でやるとこんな感じです

#running[data-press=on]{
  background-color: red;
  color: white;
  font-weight: bold;
}

document.addEventListener('keydown',function(e){
  document.querySelector("#running").setAttribute("data-press","on");
});
document.addEventListener('keyup',function(e){
  document.querySelector("#running").removeAttribute("data-press");
});

<div id="running" style="padding: 10px; margin-bottom: 10px; width: 100px; border: 1px solid #333333;">実行中</div>

Answer 3

#running.active { /*...*/ }

document.getElementById('running').classList.add('active');

https://developer.mozilla.org/ja/docs/Web/API/Element/classList