TAG
CSS
JavaScript
Result
Run
License
<ruby> Please press the Alt key and the left or right arrow keys together after focus to document. <rp>(</rp><rt>결과창을 클릭한 후 alt키와 왼쪽 또는 오른쪽 방향키를 함께 누르세요.</rt><rp>)</rp> </ruby> <div class="box"></div>
ruby { ruby-position: under; ruby-align: start; } rt { text-align: left; font-size: 12px; color: #666; } .box { width: 80px; height: 50px; background: #CCC; display: flex; justify-content: center; align-items: center; margin-top: 20px; }
window.addEventListener("load", () => { let elBox = document.querySelector(".box"); let width = 80; document.addEventListener("keydown", e => { if(e.altKey) { switch(e.code) { case "ArrowRight": elBox.style.width = `${width++}px`; break; case "ArrowLeft": elBox.style.width = `${width--}px`; break; } elBox.textContent = `${width}px`; } }); });
Console
expand_less
License
License
by DevDic
Close