使用javascript更改div颜色 [英] Change div color with javascript
本文介绍了使用javascript更改div颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div id =changestyle =height：20px; width：100％; position：absolute; float：bottom; background-color：＃000000>
< / div> <峰; br>
< option class =1value = 1>灰色
< option class =2value = 2>白色
< option class =3value = 3>蓝色
< option class =4value = 4> Cian
< option class =5value = 5>绿色
< / 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（选择）{
案例1：
div.style.backgroundColor ='gray';
案例2：
div.style.backgroundColor ='white';
案例3：
div.style.backgroundColor ='blue';
案例4：
div.style.backgroundColor ='cian';
案例5：
div.style.backgroundColor ='green';
}
< / script>
嗨！我试图用js改变div的背景颜色，但是它没有检测到选定的值，正如我在打印它时看到的那样。我在多个页面中看到了这个过程，它对我来说看起来是一样的，但它实际上不适用于我的代码。你能看到任何错误吗？
Thanks！
解决方案
- 关闭您的
code> tags。 - 使用
document.getElementById（'bgcolor'）。value - 不要忘记在每个
个案中放入break，否则您将以绿色<$ c $结尾c> 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（选择）{
case1：
div.style.backgroundColor ='gray';
休息;
case2：
div.style.backgroundColor ='white';
休息;
案例3：
div.style.backgroundColor ='blue';
休息;
case4：
div.style.backgroundColor ='cian';
休息;
case5：
div.style.backgroundColor ='green';
休息;
}
}
<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>Hi! I'm trying to change the background color of a div with js but it doesnt detect good the selected value, as i see when printing it on the parragraph. I've seen in multiple pages the procedure and it looks the same for me, but it actually does not work on my code. Can you see any mistakes? Thanks!!
解决方案- Close your
optiontags. - Use
document.getElementById('bgcolor').value - Don't forget to put
breakin eachcaseor you will end up with greendiveverytime. - Use strings for your
caseconditions.
Amended 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; } }This working fiddle sums it up.
这篇关于使用javascript更改div颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- Close your
查看全文
