使用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

回答

相关问题