Задался вопросом как это сделать ибо сам в 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 код. и видим такую картину
После нажатия наш блок становится таким
так же когда отпускаем кнопку он становится обратно серым, если вы добавили евент 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 код. и видим такую картину
После нажатия наш блок становится таким
так же когда отпускаем кнопку он становится обратно серым, если вы добавили евент keyup, Надеюсь кому то данный мануал был полезен, мне самому интересно было разобратся в этом, ибо появилась идея реализации одной штуки, может быть кому то это поможет.
Последнее редактирование:
