Javascript 如何在单击时更改背景颜色和字体颜色（无jQuery）？

我正在为学校做一个类似eReader的项目，我被指示不要使用jQuery

我想允许用户根据自己的喜好更改页面的颜色。我知道如何通过在按钮类中使用颜色名称来更改

背景色

，但我不知道如何更改字体

颜色

（我确实需要专门为黑色背景做这件事）

任何帮助都将不胜感激

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'）；
对于（变量i=0；i

您可以更改字体

颜色

执行以下操作：

var elems=document.getElementsByTagName（'button'）；
对于（变量i=0；i
伪文本
乌贼墨
黑色
白色
您可以更改字体
颜色
执行以下操作：


var elems=document.getElementsByTagName（'button'）；
对于（变量i=0；i
伪文本
乌贼墨
黑色
白色
你说不使用jQuery，但你用jQuery标记了问题？你是否尝试查找与文本颜色对应的
样式
属性？（它只是
color
）对于我现有的代码，它将根据我在div类中编写的颜色名称（即黑色、白色等）进行更改。所以我不知道如何在上面添加字体颜色。我还删除了jQyery标签。：）你说不使用jQuery，但你用jQuery标记了问题？你有没有试着查找与文本颜色对应的
style
属性？（它只是
color
）对于我现有的代码，它将根据我在div类中编写的颜色名称（即黑色、白色等）进行更改。所以我不知道如何在上面添加字体颜色。我还删除了jQyery标签。：）泰瑞，谢谢你的来电！但是，我不想将字体更改为与背景相同的颜色，因为我需要它具有可读性。我真的只需要在设置黑色背景时将字体更改为白色。Terry，谢谢你的提醒！但是，我不想将字体更改为与背景相同的颜色，因为我需要它具有可读性。我真的只需要在设置黑色背景时将字体更改为白色。
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;
   }
};