Изменение цвета фона другого элемента при клике

Question

Я хотел бы добавить параметры доступности для веб-сайта, чтобы дать пользователю возможность изменить фон следующего элемента (не весь фон документа):

   .ast-separate-container .ast-article-single {
    background-color: #fffff0;
    }

Например, я хотел бы для отображения цветных полей или текста: Розовый Белый Синий Желтый и при нажатии на ссылки цвет фона меняется.

Заранее благодарим за любые советы.

Answer 1

Взгляните на этот фрагмент кода, который использует javscript для достижения этой цели:

var background = document.getElementById('background');

function setBackgroundTo(color) {
  background.style.backgroundColor = color;
}

#background {
  height: 100px;
  width: 100px;
  background-color: red;
}

The div below simulates your background. Click a button to change its color.

<div id="background"></div>

<button onclick="setBackgroundTo('red')">Red</button>
<button onclick="setBackgroundTo('blue')">Blue</button>
<button onclick="setBackgroundTo('green')">Green</button>
<button onclick="setBackgroundTo('#000')">Black</button>

Answer 2

В этой ситуации вы должны использовать JS и добавить прослушиватель событий для этого компонента:

element.addEventListener('click', function() {
  element.classList.add(/* class with corresponding styles */)
});