由于 CSS，Cookie 没有保存背景颜色答案

【问题标题】：Cookie is not saving background color because of CSS由于 CSS，Cookie 没有保存背景颜色
【发布时间】：2020-03-19 04:38:36
【问题描述】：

当我没有将外部 CSS 链接到我的 HTML 文件时，我可以修改背景颜色。但是，当我添加外部 CSS 时，背景颜色会复制 CSS 而不是在提示中输入的值。我究竟做错了什么？

这是我的html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cookie</title>
<link rel="stylesheet" href="mystylesheet.css">
<script type="text/javascript">
<!-- 
    var myColor = prompt("Please enter a hexadecimal color code (must be 6 characters, including 0 thru 9 and A thru F):","FFFFFF");
    var myName = prompt("Please enter your name:","Cookie Monster");

    if ((myColor == null) || (myColor == "") || (myColor.length < 6 || myColor.length > 6)) myColor = "#ffffff";

     var keepCookie = (confirm("A cookie will be set. Delete cookie?")) ? "delete" : "keep";

    if (keepCookie == "delete") {
        document.cookie="testCookie=" +"YColor=" + myColor + " " + "name=" + myName + ";expires=20-May-2035";
        message= "Here is the cookie that was deleted:  ";
        message += document.cookie;
        alert(message);
    } 
    else {
        document.cookie="testCookie=" + "YColor=" + myColor + " " + "name=" + myName + ";expires=20-May-2035"; // the expiry date must be somewhere in the future, or the cookie will not be set in Firefox or Chrome
        message= "Here is the cookie that was set on your system:  ";
        message += document.cookie;
        alert(message);
    }


    var start = document.cookie.indexOf("YColor=");
    start=start + 7;
    var pos = "#" + document.cookie.substr(start,6);
    alert("Your background color will be: " + pos);

    var nameLengthS = document.cookie.indexOf("name=");
    nameLengthS=nameLengthS + 5;
    var PersonName = document.cookie.substr(nameLengthS,25);
    alert("Your name is: " + PersonName);


//-->
</script>
</head>

<body>
<h3>Cookie</h3>
<hr />
<script type="text/javascript">
<!-- 

    if ((pos == null) || (pos == "")) pos = "#ffffff";
    document.bgColor = pos;
    document.write("Your background color is: " + document.bgColor + "<br />");
    document.write("Your name is: " + window.PersonName + "<br />");
    document.write("Cookie contents: " + document.cookie);
    document.write();

//-->
</script>
</body>
</html>

【问题讨论】：

我猜这是因为您在运行脚本之前没有等待页面加载。

标签： javascript html css cookies

【解决方案1】：

它没有保存，因为您在加载 css 之前设置颜色例如

document.bgColor = pos;

在设置 CSS 颜色之前加载解决方法是在加载 CSS 后设置颜色。下面的代码使用负载监听器来改变我们选择的背景颜色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Cookie</title>
        <link rel="stylesheet" href="mystylesheet.css">
        <script type="text/javascript">
            var myColor = prompt("Please enter a hexadecimal color code (must be 6 characters, including 0 thru 9 and A thru F):","FFFFFF");
            var myName = prompt("Please enter your name:","Cookie Monster");

            if ((myColor == null) || (myColor == "") || (myColor.length < 6 || myColor.length > 6)) myColor = "#ffffff";

             var keepCookie = (confirm("A cookie will be set. Delete cookie?")) ? "delete" : "keep";

            if (keepCookie == "delete") {
                document.cookie="testCookie=" +"YColor=" + myColor + " " + "name=" + myName + ";expires=20-May-2035";
                message= "Here is the cookie that was deleted:  ";
                message += document.cookie;
                alert(message);
            } 
            else {
                document.cookie="testCookie=" + "YColor=" + myColor + " " + "name=" + myName + ";expires=20-May-2035"; // the expiry date must be somewhere in the future, or the cookie will not be set in Firefox or Chrome
                message= "Here is the cookie that was set on your system:  ";
                message += document.cookie;
                alert(message);
            }


            var start = document.cookie.indexOf("YColor=");
            start=start + 7;
            var pos = "#" + document.cookie.substr(start,6);
            alert("Your background color will be: " + pos);

            var nameLengthS = document.cookie.indexOf("name=");
            nameLengthS=nameLengthS + 5;
            var PersonName = document.cookie.substr(nameLengthS,25);
            alert("Your name is: " + PersonName);


        </script>
    </head>
    <body>
        <h3>Cookie</h3>
        <hr />
        <script type="text/javascript">
            function changeBackground() 
            {
                if ((pos == null) || (pos == "")) pos = "#ffffff";
                document.bgColor = pos;
                document.write("Your background color is: " + document.bgColor + "<br />");
                document.write("Your name is: " + window.PersonName + "<br />");
                document.write("Cookie contents: " + document.cookie);
                document.write();
            }

            window.addEventListener("load",function() { changeBackground() });
        </script>
    </body>
</html>

【讨论】：