Question

我正在为学校开展一个类似电子阅读器的项目，并且我被指示不要使用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：

＆＃13;

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;
   }
};

＆＃13;

<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>

＆＃13;

如何在点击时更改背景颜色和字体颜色（没有jQuery）？

1 个答案: