改变div的背景颜色

这是如此简单，我搜索但找不到确切的答案。改变div的背景颜色

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

谢谢！

2013-08-19 Liza

http：// stackoverflow .com/q/1874560/395255 – Asdfg

jquery将帮助很多 – Hanfeng

继承人快速解决方案

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

来源

2013-08-19 00:56:44

我得到这个工作就像一个魅力！谢谢！ – 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/

来源

2013-08-19 01:00:57 Oriol

谢谢！我是这样一个新手抱歉！我把JavaScript放在我的头文件中，我使用了CSS代码和html，div显示出来，按钮显示出来，我可以点击它们，但颜色不会改变。我看到它在jsfiddle上工作，所以我不知道我做错了什么。 – Liza

@Liza你应该把javascript放在你身体的尽头（在''之前），或者把它封装在一个函数listen ['load']中（https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load）或['DOMContentLoaded']（https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded）事件（例如使用['addEventListener']]（ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener））。如果不是，则在元素加载到DOM之前执行'document.getElementById'，所以它返回'null'。 – Oriol

改变div的背景颜色

回答

相关问题