JavaScript实现点击按钮修改body背景颜色

最新推荐文章于 2024-08-05 04:49:43 发布

bigzhad

最新推荐文章于 2024-08-05 04:49:43 发布

阅读量2.5k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hpz233/article/details/127666427

版权

本文介绍了一个简单的网页背景颜色动态切换功能实现。通过三个按钮分别控制背景颜色的变化，并使用JavaScript监听鼠标点击和移出事件来改变网页背景色。该示例展示了如何结合HTML、CSS和JavaScript完成基本的网页交互效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <style type="text/css">
        input[type=button] {
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        // 点击按钮修改 背景 

        // 点击中国红 背景红色
        // 点击 绿野星踪 背景变成绿色
        // 点击蓝色妖姬 背景变成蓝色

        //提示 
        // 先获取三个按钮  

        // 鼠标点击  onclick  鼠标点击 背景变成自己行内的背景色 

        // 鼠标移出  onmouseout   鼠标移出 背景变成白色 

        onload = function () {
            var red = document.getElementsByTagName('input')[0]
            var green = document.getElementsByTagName('input')[1]
            var blue = document.getElementsByTagName('input')[2]
            red.onclick = fn1;
            green.onclick = fn2;
            blue.onclick = fn3;
            red.onmouseout = ff
            green.onmouseout = ff
            blue.onmouseout = ff
            function fn1() {
                document.body.style.backgroundColor = redd;
            }
            function fn2() {
                document.body.style.backgroundColor = greenn;
            }
            function fn3() {
                document.body.style.backgroundColor = bluee;
            }
            function ff() {
                document.body.style.backgroundColor = '#fff';
            }
            var redd = red.style.background;
            var greenn = green.style.background;
            var bluee = blue.style.background;
            console.log(redd)
        }

    </script>
</head>

<body>
    <center>
        <input type="button" value="中国红" style="background:#FF0000;" id="red">
        <input type="button" value="绿野星踪" style="background:#00FF00;" id="green">
        <input type="button" value="蓝色妖姬" style="background:#0000FF;" id="blue">
    </center>
</body>

</html>