Changing the background colour of another element on click

Question

I would like to add accessibility options to a website to give the user the chance to change the background of the following element (not the whole document background):

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

For example, I would like to display coloured boxes or text for: Pink White Blue Yellow and when the links are clicked the background colour changes.

Thanks in advance for any advice.

Answer 1

In this situation you should use JS and add event listener to this component:

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

Answer 2

Have a look at this code snippet, which uses javscript to achieve that:

 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>