美文网首页
JavaScript实现更改背景颜色

JavaScript实现更改背景颜色

作者: Leophen | 来源:发表于2018-12-05 00:22 被阅读0次

    (onload和onchange的运用)

    实现效果:


    进入网页.jpg
    选粉显示.jpg
    选黄显示.jpg
    选橙显示.jpg
    选回去.jpg

    附上代码:

    <!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>onchange()</title>
    
            <style type="text/css">
    
                #div{
                    width:300px;
                    height:300px;
                    border:2px solid gray;
                    margin-top:10px;
                }
    
            </style>
    
            <script type="text/javascript">
               
               window.onload=function(){
    
                var menu=document.getElementById("color"),
    
                    divx=document.getElementById("div");
                    
                menu.onchange=function(){
    
                    bgcolor=menu.value;
    
                    divx.style.background=bgcolor;
    
                    if(bgcolor==0){
    
                        divx.innerHTML="我没变";
    
                    }
    
                    else{
    
                        divx.innerHTML="我变"+bgcolor+"了";
    
                    }
                    
    
                }
    
               }
    
            </script>
    
        </head>
        <body>
    
            <div>
    
                <span>请选择您喜欢的颜色:</span>
    
                <select id="color">
    
                    <option value="0">请选择</option>
    
                    <option value="pink">粉色</option>
    
                    <option value="yellow">黄色</option>
    
                    <option value="orange">橙色</option>
    
                </select>
    
            </div>
    
            <div id="div">我是div</div>
    
     </body>
    </html>
    

    相关文章

      网友评论

          本文标题:JavaScript实现更改背景颜色

          本文链接:https://www.haomeiwen.com/subject/qgmbcqtx.html