改變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的背景顏色

回答

相關問題