HTML / CSS / JS-改变样式 <td> 仅在按住ctrl / shift / alt键的同时按s

Question

I'm currently trying to build a webpage as a way of learning event handlers, though I'm having trouble figuring out what I need to do in order to make this work... 我目前正在尝试建立一个网页来学习事件处理程序，尽管我很难弄清楚要完成这项工作需要做什么...

Right now, I have a table with 4 cells in a row. 现在，我有一个连续有4个单元格的表。 I've got them styled as such. 我有他们这样的样式。

#testCtrl, #testShift, #testAlt, #testMeta {
  background-color: black;
  color: white
  ...
}

What I'm trying to do is change the background color of the cell when the appropriate key is held down. 我想做的是在按住适当的键时更改单元格的背景颜色。 Problem is - I'm unfamiliar with the syntax and what I can and can't do... All I know at this point is that I need to assign the specific td, via ID, to a variable then modify that variable. 问题是-我不熟悉语法以及我可以做和不能做的事情...目前，我所知道的是我需要通过ID将特定的td分配给变量，然后修改该变量。

var _ctrlPress = document.getElementById("testCtrl");

I'm just not sure how to test against whether or not the ctrl key is currently being pressed or not though and I'm not finding much information online about it, most likely due to poor knowledge of what to search for. 我只是不确定如何测试当前是否按下了ctrl键，而且我也没有在网上找到太多有关它的信息，这很可能是由于对搜索内容的了解不足。

Also, I'd prefer to not go the jquery route at this time. 另外，我宁愿此时不走jquery路线。

I apologize for the ignorance, and thank you much for your time. 我为您的无知表示歉意，并非常感谢您的宝贵时间。

Edit: After some advice from the comments, here is what I've come up with. 编辑：从评论中获得一些建议后，这就是我想出的。 Still errors when applying to a bigger file, though the same concept works fine in a small test HTML doc I've been tinkering with... I'm lost, ha. 应用于较大的文件时仍会出错，尽管相同的概念在我一直在尝试的小型测试HTML文档中也能很好地工作...我迷路了，哈。

Script section: 脚本部分：

window.addEventListener("keydown", function(ev) {
    var modP = ev.key;
    if ( modP=== "Shift" ) document.getElementById("testShift").classList.add("highlight");
});

Style section: 样式部分：

#testCtrl, #testShift, #testAlt, #testMeta {
  background: black;
  color: white
}

.highlight {
  background: white !important;
  color: black !important;
}

And finally, the HTML section (or at least the relevant bits): 最后，HTML部分（或至少相关部分）：

<tr>
  <td id="fillShift"> Shift
  <td id="fillCtrl"> Ctrl
  <td id="fillAlt"> Alt
  <td id="fillMeta"> Meta
</tr>

Where am I messing up? 我在哪里弄糟？

Again, I apologize for my ignorance. 我再次为自己的无知表示歉意。 Thank you so much for your time. 非常感谢您的参与。

Answer 1

Add 2 eventListener to window. 向窗口添加2个eventListener 。 1 for keydown and 1 for keyup. 1用于键盘按下，1用于键盘按下。 on keydown, change the color. 在键盘按下时，更改颜色。 on keyup, change the color back 在键盘上，将颜色改回

 window.addEventListener("keydown",function(e){ if(/^1[6-8]$/.test(e.keyCode)){ document.body.style.backgroundColor="#f00"; } }); window.addEventListener("keyup",function(){ document.body.style.backgroundColor="#aaa"; });

 <body style="background-color:#aaa;"></body>

HTML / CSS / JS-改变样式 <td> 仅在按住ctrl / shift / alt键的同时按s

问题描述

1 个解决方案

解决方案1
0 2017-03-29 12:45:07

HTML / CSS / JS-改变样式 <td> 仅在按住ctrl / shift / alt键的同时按s

问题描述

1 个解决方案

解决方案1 0 2017-03-29 12:45:07

解决方案1
0 2017-03-29 12:45:07