Как вернуть значение CSS свойства по умолчанию?

Question

Роман @yagyar001

Как вернуть значение CSS свойства по умолчанию?

Всем привет. Учу js. Пишу клавиатуру. При нажатии на кнопку CapsLock фон ее становится красным. Но как сделать, чтобы при повторном нажатии фон ставился такой, который стоит по умолчанию без всяких стилей? Кроме того слетает стиль border еще.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Моя первая программа</title>
	<link rel="stylesheet" href="style.css">
	
</head>
<body id="body">
	
<input type="text" id="input">

<br><br><br>
<input type="button" value="1" id="button">
<input type="button" value="2" id="button">
<input type="button" value="3" id="button">
<input type="button" value="4" id="button">
<input type="button" value="5" id="button">
<input type="button" value="6" id="button">
<input type="button" value="7" id="button">
<input type="button" value="8" id="button">
<input type="button" value="9" id="button">
<input type="button" value="0" id="button">
<input type="button" value="-" id="button">
<input type="button" value="=" id="button">
<input type="button" value="← BackSpace" id="button" class="btn">
<br>
<br>
<input type="button" value="CapsLock" id="button" class="btn">
<input type="button" value="q" id="button">
<input type="button" value="w" id="button">
<input type="button" value="e" id="button">
<input type="button" value="r" id="button">
<input type="button" value="t" id="button">
<input type="button" value="y" id="button">
<input type="button" value="u" id="button">
<input type="button" value="i" id="button">
<input type="button" value="o" id="button">
<input type="button" value="p" id="button">
<input type="button" value="[" id="button">
<input type="button" value="]" id="button">
<br>
<br>
<input type="button" value="a" id="button">
<input type="button" value="s" id="button">
<input type="button" value="d" id="button">
<input type="button" value="f" id="button">
<input type="button" value="g" id="button">
<input type="button" value="h" id="button">
<input type="button" value="j" id="button">
<input type="button" value="k" id="button">
<input type="button" value="l" id="button">
<input type="button" value=";" id="button">
<input type="button" value="'" id="button">
<input type="button" value="\" id="button">
<br>
<br>
<input type="button" value="z" id="button">
<input type="button" value="x" id="button">
<input type="button" value="c" id="button">
<input type="button" value="v" id="button">
<input type="button" value="b" id="button">
<input type="button" value="n" id="button">
<input type="button" value="m" id="button">
<input type="button" value="," id="button">
<input type="button" value="." id="button">
<input type="button" value="/" id="button">
<br><br>
<input type="button" value="_____"  id="button" style="margin-left:150px; width: 200px;">


<script src="js.js"></script>
</body>

</html>

.btn {
	width: 110px !important;
}
#button {
	width: 50px;
	height: 30px;
}

let text = document.querySelector('#input');

let buttons = document.querySelectorAll('#button');

let checkCapsLock = 1;
for (let button of buttons) {
	button.addEventListener('click', function(){
		text.focus();
		if (this.value == '← BackSpace' || this.value == '_____' || this.value == 'CapsLock') {
			if (this.value == '← BackSpace') {
			text.value = text.value.substring(0, text.value.length - 1);
			}

			if (this.value == '_____') {
				text.value = text.value + ' ';
			}

			if (this.value == 'CapsLock') {
				if (checkCapsLock % 2 != 0) {
					this.style.background = 'red';
				} else {
					this.style.background = 'none';
				}
				checkCapsLock++;
			}

		} else {
			text.value = text.value + this.value;
		}
	})
}