單擊時更改另一個元素的背景顏色

Question

我想向網站添加可訪問性選項，讓用戶有機會更改以下元素的背景（而不是整個文檔背景）：

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

例如，我想顯示彩色框或文本：粉紅色白色藍色黃色，當點擊鏈接時，背景顏色會發生變化。

提前感謝您的任何建議。

Answer 1

在這種情況下，您應該使用 JS 並向該組件添加事件偵聽器：

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

Answer 2

看看這個代碼片段，它使用 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>