Это так просто и я искал, но не смог найти точный ответ.изменить цвет фона div
Все, что я хочу сделать, это иметь div, который изменит цвет при нажатии ссылки. Я хочу иметь выбор из 3 или 4 цветов. Как мне это сделать?
Спасибо!
Heres быстрый решения
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeColor(color){
var div = document.getElementById('box');
div.style.backgroundColor = color;
}
</script>
</head>
<body onload="changeColor('green')">
<div id="box" style="width:200px; height:200px;"></div>
<a href="#" onclick="changeColor('yellow')">Yellow</a>|
<a href="#" onclick="changeColor('green')">Green</a>|
<a href="#" onclick="changeColor('blue')">Blue</a>|
<a href="#" onclick="changeColor('white')">White</a>
</body>
</html>
Я получил эту работу, как шарм! Спасибо! – Liza
Демо: http://jsfiddle.net/jnAem/
JS:
var els = document.getElementsByClassName('change-color'),
target = document.getElementById('target'),
changeColor = function(){
target.style.backgroundColor = this.getAttribute('data-color');
};
for(var i=els.length-1; i>=0; --i){
els[i].onclick = changeColor;
}
HTML:
<div id="target"></div>
<button class="change-color" data-color="red">Red</button>
<button class="change-color" data-color="#000">Black</button>
<button class="change-color" data-color="rgb(0,0,255)">Blue</button>
Обратите внимание, что если вы хотите, чтобы все цвета меновщики быть дети того же элемента, вы можете использовать делегирование событий и уменьшить предыдущий код
JS:
document.getElementById('color-changers').onclick = function(e) {
var color = (e ? e.target : window.event.srcElement).getAttribute('data-color');
if(color){
target.style.backgroundColor = color;
}
}
HTML:
<div id="target"></div>
<div id="color-changers">
<button data-color="red">Red</button>
<button data-color="#000">Black</button>
<button data-color="rgb(0,0,255)">Blue</button>
</div>
Демонстрация: http://jsfiddle.net/jnAem/1/
Спасибо! Мне так жалко! Я помещаю javascript в свой заголовок, я использовал код css и html, отображает div, появляются кнопки, и я могу их кликнуть, но цвет не меняется. Я вижу, что он работает на jsfiddle, поэтому я не знаю, что я делаю неправильно. – Liza
@Liza. Вы должны поместить javascript в конец вашего тела (непосредственно перед '
http: // stackoverflow .com/q/1874560/395255 – Asdfg
jQuery поможет много – Hanfeng