使用javascript更改div color

<div id="change" style="height:20px; width:100%; position: absolute; float:bottom; background-color:#000000"> 
</div> <br> 
       <select name="bgcolor" id="bgcolor" onchange="colorDiv()"> 
        <option class="1" value=1> Grey 
        <option class="2" value=2> White 
        <option class="3" value=3> Blue 
        <option class="4" value=4> Cian 
        <option class="5" value=5> Green 
       </select> <br><br> 

<p id="demo"></p>  




<script> 
function colorDiv(){ 
     var selection = document.getElementById('bgcolor'); 
     var div = document.getElementById('change');   
      div.style.backgroundColor='green'; 

     document.getElementById("demo").innerHTML =selection; 

     switch (selection){ 
      case 1: 
      div.style.backgroundColor='grey'; 
      case 2: 
      div.style.backgroundColor='white'; 
      case 3: 
      div.style.backgroundColor='blue'; 
      case 4: 
      div.style.backgroundColor='cian'; 
      case 5: 
      div.style.backgroundColor='green';  
     } 
</script>

嗨！我試圖用js改變div的背景顏色，但是它沒有檢測到選定的值，正如我在打印它時看到的那樣。我在多個頁面中看到了這個過程，它對我來說看起來是一樣的，但它實際上不適用於我的代碼。你能看到任何錯誤嗎？謝謝！使用javascript更改div color

來源

2013-10-29 Alvaro Gomez

關閉您的option標籤。
使用document.getElementById('bgcolor').value
不要忘了把break每個case否則你將結束與綠色div每次。
爲您的case條件使用字符串。

修訂的Javascript：

function colorDiv() { 
    var selection = document.getElementById('bgcolor').value; 
    var div = document.getElementById('change'); 
    div.style.backgroundColor = 'green'; 

    document.getElementById("demo").innerHTML = selection; 

    switch (selection) { 
     case "1": 
      div.style.backgroundColor = 'grey'; 
      break; 
     case "2": 
      div.style.backgroundColor = 'white'; 
      break; 
     case "3": 
      div.style.backgroundColor = 'blue'; 
      break; 
     case "4": 
      div.style.backgroundColor = 'cian'; 
      break; 
     case "5": 
      div.style.backgroundColor = 'green'; 
      break; 
    } 
}

這working fiddle總結道。

來源

2013-10-29 18:44:45

我把複製你的修改代碼到您的文章的自由。 JSFiddles很好，但請在你的回答中加入代碼。 – George

@oGeez是的，我同意，應該包括它自己。謝謝 –

@ArtyomNeustroev使用'cyan'而不是'cian'。 – TheGreenOmega

此外，切換案例需要一個break語句後，每個或最後一個將是你會看到，在這種情況下，綠色。 http://www.w3schools.com/js/js_switch.asp

來源

2013-10-29 18:47:53 MJSalinas

<div id="change" style="height:20px; background-color:#000000"> 
    change 
</div> 
<select name="bgcolor" id="bgcolor" onchange="colorDiv()"> 
    <option class="1" value="0"> Grey</option> 
    <option class="2" value="1"> White </option> 
    <option class="3" value="2"> Blue</option> 
    <option class="4" value="3"> Cian</option> 
    <option class="5" value="4"> Green</option> 
</select> 
<p id="demo"></p>  

<script> 
function colorDiv(){ 
     var selection = document.getElementById('bgcolor').selectedIndex; 
     var div = document.getElementById('change'); 
     div.style.backgroundColor='green'; 
     var colors = ["grey","white","blue","cian","green"]; 

     document.getElementById("demo").innerHTML = colors[selection]; 

     switch (selection){ 
      case 0: 
      div.style.backgroundColor='grey'; 
      break; 
      case 1: 
      div.style.backgroundColor='white'; 
      break; 
      case 2: 
      div.style.backgroundColor='blue'; 
      break; 
      case 3: 
      div.style.backgroundColor='cian'; 
      break; 
      case 4: 
      div.style.backgroundColor='green'; 
      break; 
     default: 
      div.style.backgroundColor='purple'; 
     } 
    }; 
</script>

來源

2013-10-29 18:50:08 gasp

<html> 
<body> 
<button onclick="myFunction()">Try it</button> 
<div style="width:100px; height:100px; float:left;border:1px solid #000;" id="demo"></div> 
<script> 
function myFunction() { 
    var latters = 'ABCDEF1234567890'.split(""); 
    var color = '#'; 
    for (var i=0; i < 6; i++) 
    { 
    color+=latters[Math.floor(Math.random() * 16)]; 

    } 

    document.getElementById("demo").style.background = color ; 

} 
</script> 
</body> 
</html>

來源

2014-06-11 08:41:13

您的回答只包含代碼。您應該實際解釋您的代碼如何爲OP提供一個很好的答案！ – Victor

使用javascript更改div color

回答

相關問題