HTML / CSS / JS-改變樣式 <td> 僅在按住ctrl / shift / alt鍵的同時按s

Question

我目前正在嘗試建立一個網頁來學習事件處理程序，盡管我很難弄清楚要完成這項工作需要做什么...

現在，我有一個連續有4個單元格的表。 我有他們這樣的樣式。

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

我想做的是在按住適當的鍵時更改單元格的背景顏色。 問題是-我不熟悉語法以及我可以做和不能做的事情...目前，我所知道的是我需要通過ID將特定的td分配給變量，然后修改該變量。

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

我只是不確定如何測試當前是否按下了ctrl鍵，而且我也沒有在網上找到太多有關它的信息，這很可能是由於對搜索內容的了解不足。

另外，我寧願此時不走jquery路線。

我為您的無知表示歉意，並非常感謝您的寶貴時間。

編輯：從評論中獲得一些建議后，這就是我想出的。 應用於較大的文件時仍會出錯，盡管相同的概念在我一直在嘗試的小型測試HTML文檔中也能很好地工作...我迷路了，哈。

腳本部分：

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

樣式部分：

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

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

最后，HTML部分（或至少相關部分）：

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

我在哪里弄糟？

我再次為自己的無知表示歉意。 非常感謝您的參與。

Answer 1

向窗口添加2個eventListener 。 1用於鍵盤按下，1用於鍵盤按下。 在鍵盤按下時，更改顏色。 在鍵盤上，將顏色改回

 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