如何在點擊時更改背景顏色和字體顏色（無jQuery）？

Question

我正在為學校開發類似eReader的項目，並被指示不要使用jQuery。

我想允許用戶根據自己的喜好更改頁面的顏色。 我想出了如何通過使用按鈕類中的顏色名稱來更改background-color的方法，但是我無法弄清楚如何更改字體的color （我確實需要專門針對黑色背景進行此操作）。

任何幫助，將不勝感激！

HTML：

<div class="textBox">Dummy text</div>
<button class="bisque">sepia</button>
<button class="black">black</button>
<button class="white">white</button>    

JS：

var elems = document.getElementsByTagName('button');

for(var i = 0; i < elems.length; i++) {
     elems[i].onclick = function(e) {
       e.preventDefault();
       var color = this.getAttribute('class');
       document.getElementsByTagName('body')[0].style.background = color;
   }
};

Answer 1

您可以執行以下操作來更改字體color ：

 var elems = document.getElementsByTagName('button'); for(var i = 0; i < elems.length; i++) { elems[i].onclick = function(e) { e.preventDefault(); var color = this.getAttribute('class'); var font_color = this.getAttribute('data-color'); document.getElementsByClassName('textBox')[0].style.color = font_color; document.getElementsByTagName('body')[0].style.background = color; } }; 

 <div class="textBox">Dummy text</div> <button class="bisque" data-color="black">sepia</button> <button class="black" data-color="white">black</button> <button class="white" data-color="bisque">white</button>