javascript - 为什么点击关闭时body的backgroundColor颜色不能变为白色了

查看:78
本文介绍了javascript - 为什么点击关闭时body的backgroundColor颜色不能变为白色了的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

<!DOCTYPE html>
<html>
<head>
    <title>浮动窗口练习</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            /* background-color: gray; */
        }
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background-color: rgba(255,255,255,0.2);
            /* opacity: 0.2; */
        }
        .alert1 {
            width: 400px;
            height: 200px;
            border: 2px solid blue;
            border-radius: 5px;
            background-color: cyan;
            margin-top: 100px;
            margin-left: 500px;
            display: inline-block;
        }
    </style>
</head>
<body>
        <input type="button" value="点我看看" onclick="a.alertWindow()">
        <a href=""></a>
</body>
</html>
<script type="text/javascript">
    // function click0 () { 
    //     alertWindow();
    // }
    function A (name) {
        this.name = name;
        
      this.alertWindow = function () {
          document.body.style.backgroundColor = "rgb(255,255,255)";
        var div = document.createElement('div');
        div.setAttribute("class", "cover");
        var div0 ="<div class = 'alert1'>";
        div0 += '<div class="content"></div>';
        div0 += '<div class="tool">';
        div0 += '<p>' + name + '</p>';
        div0 += '<input type="button" value="确定" id="Ok">';
        div0 += '<input type="button" value="关闭" id="Cancle">';
        div0 += '</div>';
        div0 += '</div>';
        div.innerHTML = div0;
        document.body.appendChild(div);
        div.style.display = 'block';

        var cover = document.getElementsByClassName('cover')[0];
        this.cover = div;
        // var that = this;
        var Ok1 = document.getElementById('Ok');
        var Cancle1 = document.getElementById('Cancle');
        var that = this;
        Ok1.onclick = function  () {
            // cover.style.display = "none";
            var x = 255;
            var y = 0;
            function change () {
                x--;
                y++;        
                document.body.style.backgroundColor = "rgb(255," + y + "," + x + ")";
                setInterval(change, 200);
                if (x == 0) {
                    clearInterval(change);
                    // document.body.style.backgroundColor = "rgb(255," + y + "," + x + ")";
                }    
            }
            setTimeout(change, 200);
            that.close();
        }
        Cancle1.onclick = function () {    
            // cover.style.display = "none";
            document.body.style.backgroundColor = "rgb(0,255,0)";
            that.close();
            // var bgColor = document.getElementsByTagName('body');
            // bgColor.style.backgroundColor = "white";
            
        }
         this.adjust();
    }
    this.close = function () {
        // cover.remove();
        this.cover.remove();
    }
    this.adjust = function () {

        // 1 让弹出层的大小跟窗口一样大
        this.cover.style.width = window.innerWidth+"px";
        this.cover.style.height = window.innerHeight+"px";
    }
    }    
    var a = new A("百度");
    

</script>
</body>

解决方案

Cancle1.onclick = function () {    
            // cover.style.display = "none";
            document.body.style.backgroundColor = "rgb(0,255,0)";
            that.close();
            // var bgColor = document.getElementsByTagName('body');
            // bgColor.style.backgroundColor = "white";
            
        }

你设置的backgroundColor不是绿色的吗?

这篇关于javascript - 为什么点击关闭时body的backgroundColor颜色不能变为白色了的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆