改变div的背景颜色答案

【问题标题】：change background color of div改变div的背景颜色
【发布时间】：2013-08-20 17:38:36
【问题描述】：

这很简单，我搜索了但找不到确切的答案。

我想要做的就是有一个 div，当你点击一个链接时它会改变颜色。我想要大约 3 或 4 种颜色选择。我该怎么做？

谢谢！

【问题讨论】：

stackoverflow.com/q/1874560/395255
jquery 会有很大帮助

标签： html colors background onclick

【解决方案1】：

演示：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 您应该将 javascript 放在正文的末尾（就在 </body> 之前），或者将其包装在侦听 load 或 DOMContentLoaded 事件的函数中（例如使用 addEventListener ）。如果没有，document.getElementById 在元素加载到 DOM 之前执行，所以它返回 null。

【解决方案2】：

这是一个快速的解决方案

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

【讨论】：