Question

我试图在keydown事件上使用javascript更改元素的样式。我已经通过鼠标点击完成了这样的操作：

#mpc ul li:active {
 background:#844;

这些是我试图改变的元素的原始属性：

<div id="mpc">

 <div id="wrapper">

  <ul>
   <li id="kickDrum_p1">1<p>Kick</p></li>
   <li id="snareDrum_p2">2<p>Snare</p></li>
   <li id="closedHiHat_p3">3<p>ClosHat</p></li>
   <li id="openHiHat_p4">4<p>Open HiHat</p></li>
  </ul>

 </div>

</div>

这是原始的CSS。

#mpc ul li {
background:#999;
}

我是css / html和javascript的新手，并且还没有开始学习jquery，所以我更喜欢用javascript和css来做这一切。

我们的想法是为每个列表项分配一个不同的键，当在页面上按下该键时，列表项的背景会发生变化，就像我完成了点击事件一样。与点击事件的不同之处在于，由于您手动选择所需的列表项，然后更改了它的样式，因此它不会跟随ID。

使用键输入，但我需要指定哪个列表项完全是我的目标。

所以我认为我需要创建一个新的css类，其中包含我希望元素更改为的背景属性，并使用javascript告诉我当按下＆＃39; H＆＃39;例如，它应该将元素的样式更改为，并且当我松开键以将其反转回正常时。如果这是有道理的。我不知道怎么回事。

编辑：

这就是我尝试这样做的方式：

var keypress = document.getElementById("kickDrum_p1")[0]

document.addEventListener("keydown", function (e) {
if(e.keyCode == 69) {
var key = e.keyCode
var color = keypress.getElementByClassName("color")
if(color.length !=0 ){
    cur = color[0]
    cur.className = " "
}

cur.className="color"
}

});

在我的风格中：

#mpc ul li.color {
background:#844;
}

Answer 1

<P ID="MyID" CLASS="Testclass">Test</P>

<SCRIPT>
Add here jQuery
$("*").keypress(function(event){
    if(event.which==107 || event.which==75){
        $("#MyID").attr("class", "newclass");
    }
}
</SCRIPT>

BTW：107和57是ASCII表中的K和k。

在keydown上使用javascript更改样式/类

1 个答案: