[英]How to change background color and font color on click (no jQuery)?
我正在为学校开发类似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;
}
};
您可以执行以下操作来更改字体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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.