div那里显示的“4”怎么变成跟背景颜色相同的文字

div那里显示的“4”怎么变成跟背景颜色相同的文字

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>onchange()</title>
   <style type="text/css">
    #div{
    width:300px;
    height:300px;
    border:2px solid gray;
    margin:100px  0  0 200px;
    }
   </style>
   <script type="text/javascript">
      window.onload=function(){
       var box=document.getElementById("color");
     
            box.onchange=function(){
             
             var bground=this.value;
             var nei=this.innerHTML;
             var bth=document.getElementById("div");
             var num=document.getElementById("color").getElementsByTagName("option");
             
             function name(num){
             var newArr=[];
             for(var i=0;i<num.length;i++){
                        newArr[i]=num[i];
                        var minzi=num[i].innerHTML;
                        console.log(i);
                        if(i==0&&bground==0){
                            bth.innerHTML="我没有发生任何变化";
                            bth.style.background="#fff";
                        }
                        else{
                         bth.style.background=bground;
                     bth.innerHTML="我的背景颜色变成了"+i;
                        }
             }
             }
             name(num);
             /*if(bground==0){
                    bth.innerHTML="我没有发生任何变化";
                    bth.style.background="#fff";
             }
             else{
             bth.style.background=bground;
             bth.innerHTML="我的背景颜色变成了"+bground;
             
             }*/
            }
      }
   </script>
</head>
<body>
        <div>
         <span>请选择您喜欢的颜色:</span>
         <select id="color">
         <option value="0">请选择</option>
         <option value="yellow">黄色</option>
         <option value="orange">橘色</option>
         <option value="pink">粉色</option>
         <option value="purple">紫色</option>
         </select>
        </div>
<div id="div">我是div</div>
 </body>
</html>

div那里显示的“4”怎么变成跟背景颜色相同的文字

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
卡布琦诺 2017-09-24 17:23:06
<script type="text/javascript">
			window.onload = function() {
				var box = document.getElementById("color");
                var bth = document.getElementById("div");
				box.onchange = function() {

					var bground = this.value;
					// var nei = this.innerHTML;
					// var bth = document.getElementById("div");
					// var num = document.getElementById("color").getElementsByTagName("option");

					// function name(num) {
					// 	var newArr = [];
						// for(var i = 0; i < num.length; i++) {
						// 	newArr[i] = num[i];
						// 	var minzi = num[i].innerHTML;
							// console.log(i);
							if(bground=="0") {
								bth.innerHTML = "我没有发生任何变化";
								bth.style.background = "#fff";
							} else {
								bth.style.background = bground;
                                // 获取option中的中文文本
                                var bgcolor_1=box.options[box.selectedIndex].innerHTML;
								bth.innerHTML = "我的背景颜色变成了" + bgcolor_1;
							}
						// }
					// }
					// name(num);
				}
			}
		</script>

让你看上一个问题是让你根据代码去理解,然后整理自己的思路,遇到问题首先要学会独立思考,这对你将来真正工作是有一定的帮助的,关于变成中文的你可以参考上列代码的注释进行理解,如果还有不懂的,可以再次提问,祝学习愉快!

  • 提问者 蜀绘 #1
    你给我这个代码的问题我没有发生,我问的是怎么把颜色的英语变成中文,是这个问题,我想不通。用英文显示的我完成过了
    2017-09-24 17:49:30
  • 卡布琦诺 回复 提问者 蜀绘 #2
    关于变成中文的你可以参考上列代码的注释进行理解,如果还有不懂的,可以再次提问,祝学习愉快!
    2017-09-25 10:15:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师