Задался вопросом как это сделать ибо сам в js мало чего знаю, поэтому и сделал эту штуку, к примеру у меня есть кнопка, и я хочу чтобы при нажатии клавиши она меняла цвет, или меняла цвет только когда клавиша нажата, тут и рассмотрим данную ситуацию.
Для начала Создадим HTML Файл.
Перейдём к css стилю.
// Теперь по желанию, если хотим чтобы после нажатия кнопки только применялся другой класс и всё, то дальше ничего не пишем.
document.addEventListener('keyup', function (event) // Этот евент для того чтобы класс применялся только на время нажатия кнопки, а не был применён постоянно, тоесть если мы отпустим кнопку то вернётся обычный класс box
if (event.key === 'n' || event.key === 'N') { // Проверяем, была ли нажата кнопка N, так же можно поменять N на любую другую клавишу.
var myElement = document.getElementById("box"); // Здесь мы и используем id Box про который я говорил выше.//
myElement.classList.remove("box1"); // Сюда вписываем класс который должен быть применён после нажатия кнопки N, данная строка отвечает за удаление класса после отпускания кнопки, тоесть вернётся класс box.
}
});[/CODE]
Теперь открываем наш Html код. и видим такую картину
![1688851414888.png 1688851414888.png](https://rage-script.com/data/attachments/0/544-a67b2eb69d1119ee4d39d5d8240a263a.jpg?hash=pnsutp0RGe)
После нажатия наш блок становится таким
![1688851429345.png 1688851429345.png](https://rage-script.com/data/attachments/0/545-24a7cdb3bb12e10377779d5ec91823e4.jpg?hash=JKfNs7sS4Q)
так же когда отпускаем кнопку он становится обратно серым, если вы добавили евент keyup, Надеюсь кому то данный мануал был полезен, мне самому интересно было разобратся в этом, ибо появилась идея реализации одной штуки, может быть кому то это поможет.
Для начала Создадим HTML Файл.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css"> // Подключаем css стиль.
<script src="./main.js"></script> // Подключаем JS Файл, в котором и будем писать скрипт кнопки.
<title>Document</title>
</head>
<body>
<div class="main"> // Создаём div в котором будет находится наш блок, можно и без него, я решил создать.
<div id="box" class="box"></div> // Создаём div самого блока. где id="box" Это имя по которому мы будем вызывать евент смены класса при нажатии кнопки в js коде.
</div>
</body>
</html>
CSS:
.box { // Создадим класс для нашего блока
border-radius: 8px;
border: 2px solid #505155;
background: rgba(55, 56, 58, 0.15);
backdrop-filter: blur(10px);
width: 446px;
height: 95px;
flex-shrink: 0;
}
.box1 { // Создадим класс который будет применяться при нажатии кнопки ( Что хотим видеть, к примеру тут я изменил цвет контура и фона )
border-radius: 8px;
border: 2px solid #ffffff;
background: rgb(0, 85, 255);
backdrop-filter: blur(10px);
width: 446px;
height: 95px;
flex-shrink: 0;
}
.main { // Создадим Класс в котором находится наш блок
position: absolute;
width: 100%;
height: 100%;
}
Перейдём к JS коду.
[CODE=javascript]document.addEventListener('keydown', function (event) {
if (event.key === 'n' || event.key === 'N') { // Проверяем, была ли нажата кнопка N, так же можно поменять N на любую другую клавишу.
var myElement = document.getElementById("box"); // Здесь мы и используем id Box про который я говорил выше.
myElement.classList.add("box1"); // box1 - класс который будет применён после нажатия кнопки N.
}
});
// Теперь по желанию, если хотим чтобы после нажатия кнопки только применялся другой класс и всё, то дальше ничего не пишем.
document.addEventListener('keyup', function (event) // Этот евент для того чтобы класс применялся только на время нажатия кнопки, а не был применён постоянно, тоесть если мы отпустим кнопку то вернётся обычный класс box
if (event.key === 'n' || event.key === 'N') { // Проверяем, была ли нажата кнопка N, так же можно поменять N на любую другую клавишу.
var myElement = document.getElementById("box"); // Здесь мы и используем id Box про который я говорил выше.//
myElement.classList.remove("box1"); // Сюда вписываем класс который должен быть применён после нажатия кнопки N, данная строка отвечает за удаление класса после отпускания кнопки, тоесть вернётся класс box.
}
});[/CODE]
Теперь открываем наш Html код. и видим такую картину
![1688851414888.png 1688851414888.png](https://rage-script.com/data/attachments/0/544-a67b2eb69d1119ee4d39d5d8240a263a.jpg?hash=pnsutp0RGe)
После нажатия наш блок становится таким
![1688851429345.png 1688851429345.png](https://rage-script.com/data/attachments/0/545-24a7cdb3bb12e10377779d5ec91823e4.jpg?hash=JKfNs7sS4Q)
так же когда отпускаем кнопку он становится обратно серым, если вы добавили евент keyup, Надеюсь кому то данный мануал был полезен, мне самому интересно было разобратся в этом, ибо появилась идея реализации одной штуки, может быть кому то это поможет.
Последнее редактирование: