更改背景颜色-蒲公英云

更改背景颜色

向右看齐 2022-09-19 12:06 296阅读 0赞

<html>
    <head>
        <title>更改背景颜色</title>
        <script>
            function change1(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.bgColor = "#ff0000";
            }
            function change2(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.bgColor = "#00ff00";
            }
            function change3(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.bgColor = "#0000ff";
            }
            function change4(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.style.backgroundColor   = "#ff0000";
            }
            function change5(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.style.backgroundColor  = "#00ff00";
            }
            function change6(){
                //获取body节点对象
                var bodyNode = document.getElementsByTagName("body")[0];
                //alert(bodyNode);
                //alert(bodyNode.nodeName);
                //改变背景颜色
                bodyNode.style.backgroundColor  = "#0000ff";
            }
            function change(c){
                var bodyNode = document.getElementsByTagName("body")[0];
                bodyNode.style.backgroundColor = c;
            }
            function aotochange(c){
                var bodyNode = document.getElementsByTagName("body")[0];
                bodyNode.style.backgroundColor = c;
            }
        </script>
    </head>
    <body>
    更改背景颜色<br/>
    通过bgColor设置：
         <input type="button" value="red" οnclick="change1()">
        <input type="button" value="green" οnclick="change2()">
        <input type="button" value="blue" οnclick="change3()">
        <hr/>
    通过style设置；    
        <input type="button" value="red" οnclick="change4()">
        <input type="button" value="green" οnclick="change5()">
        <input type="button" value="blue" οnclick="change6()">
        <hr/>
    传入参数：
        <input type="button" value="red" οnclick="change('#ff0000')">
        <input type="button" value="green" οnclick="change('#00ff00')">
        <input type="button" value="blue" οnclick="change('#0000ff')">
        <hr/>
    通过鼠标悬浮响应事件：
        <input type="button" value="red" οnmοusemοve="aotochange('#ff0000')">
        <input type="button" value="green" οnmοusemοve="aotochange('#00ff00')">
        <input type="button" value="blue" οnmοusemοve="aotochange('#0000ff')">
    </body>
</html>