Включите лампу с помощью JavaScript: манипуляции CSS, изменение источника изображения и цвет фона

Чтобы включить лампу с помощью JavaScript, можно использовать несколько способов. Вот несколько примеров:

Метод 1. Манипулирование CSS

Вы можете изменить стиль элемента лампы, чтобы он выглядел так, как будто он включен. Например, вы можете добавить класс к элементу лампы и определить для этого класса стили CSS для отображения изображения горящей лампы. Вот пример:

HTML:

<div id="lamp" class="lamp-off"></div>

CSS:

.lamp-off {
  background-image: url('lamp-off.png');
}
.lamp-on {
  background-image: url('lamp-on.png');
}

JavaScript:

// Turn the lamp on
document.getElementById('lamp').classList.add('lamp-on');
// Turn the lamp off
document.getElementById('lamp').classList.remove('lamp-on');

Метод 2. Изменение источника изображения

Вы можете иметь два отдельных изображения лампы: одно для выключенного состояния, а другое для включенного. Изменяя источник элемента изображения, вы можете переключаться между двумя изображениями. Вот пример:

HTML:

<img id="lamp" src="lamp-off.png" alt="Lamp">
<button onclick="turnOn()">Turn On</button>
<button onclick="turnOff()">Turn Off</button>

JavaScript:

function turnOn() {
  document.getElementById('lamp').src = 'lamp-on.png';
}
function turnOff() {
  document.getElementById('lamp').src = 'lamp-off.png';
}

Метод 3. Изменение цвета фона

Вы также можете изменить цвет фона элемента лампы, чтобы имитировать включение лампы. Вот пример:

HTML:

<div id="lamp" ></div>
<button onclick="turnOn()">Turn On</button>
<button onclick="turnOff()">Turn Off</button>

JavaScript:

function turnOn() {
  document.getElementById('lamp').style.backgroundColor = 'yellow';
}
function turnOff() {
  document.getElementById('lamp').style.backgroundColor = 'black';
}