特定の文字のkeydownイベントを作成して、自分のWebページの特定のdivを強調表示しようとしています

Question

私のウェブページのキーボードのkeydownイベントに応じて特定のdivをどのように強調表示できるかを試しています。誰かが私を助けることができたらすばらしいでしょう。乾杯。

Answer 1

jqueryを使用している場合はjsfiddleが役に立ちます。

HTML

<div id='test'>Hello world</div> 

CSS

#test { 
    border: 1px solid black; 
    float:left; 
} 
.new { 
    border:4px solid red !important; 
} 

JS

$(function() { 
    $(document).on('keydown',function() { 
    if(e.which == 65 || e.which == 66) { # 65 and 66 are ASCII for a and b in small caps 
     $('#test').addClass('new'); 
    } 
    }); 
    $(document).on('keyup',function() { 
    $('#test').removeClass('new'); 
    }); 
}) 

Answer 2

たぶん、このようなものが

HTML

<div id="mydiv">Text</div> 

CSS

.highlight{ 
    background:green; 
} 

JSを動作するはず

document.addEventListener('keydown',function(e){ 
    if(e.key == '<key here>') mydiv.classList.add('highlight') 
}) 

はjsfiddleに取り組んテスト：https://jsfiddle.net/u9z68arp/