我正在为学校做一个类似电子阅读器的元素,我被告知不要使用 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;
}
};
最佳答案
您可以通过以下操作更改字体颜色
:
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>
关于javascript - 如何在单击时更改背景颜色和字体颜色(无 jQuery)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50789734/