Изменение цвета фона веб-страницы с помощью Javascript

Я noob для Javascript, поэтому я борюсь с тем, как это сделать. Я должен изменить цвет фона моей веб-страницы, когда пользователь нажимает одну из этих трех кнопок. Это мой код в HTML.


Поэтому, когда пользователь нажимает на эти ссылки, цвет фона веб-страницы должен измениться на этот цвет. Каков наилучший способ сделать это с помощью javascript?

Я попробовал это

function changeBGC (color) {
document.bgColor= color;
}

и изменил мой html на это


Ничего не происходит, когда я нажимаю ссылки

3 ответа

Html

<ul id="colors">
 <li id="yellow">yello</li>
 <li id="orange">orange</li>
 <li id="red">red</li>
</ul>

Javascript

var colors = document.getElementById('colors');

colors.addEventListener('click', function(e) {
 var el = e.target,
 color = el.id;

 document.documentElement.style.backgroundColor = color;
});

Это работает... http://jsfiddle.net/Ayh3q/


Пока идентификаторы элементов являются действительными цветами CSS, вы можете просто прочитать их из атрибута:

Array.prototype.forEach.call(document.getElementsByTagName('li'), function (el) {
 el.addEventListener('click', function (e) {
 document.body.style.background = el.id;
 })
});

Что-то вроде этой скрипки.


Вы можете попробовать это (пример)

HTML:

<ul id="colorSet">
 <li>Yellow</li>
 <li>Orange</li>
 <li>Red</li>
</ul>

JS:

window.onload = function(){
 var ul = document.getElementById('colorSet');
 ul.onclick = function(e){
 var evt = e || window.event;
 var target = evt.target || evt.srcElement;
 document.body.style.backgroundColor = target.innerHTML;
 };
};

licensed under cc by-sa 3.0 with attribution.