javascript - 当我们刷新浏览器时如何防止更改所选颜色

对不起我的英语..

在我的网站中，我添加了一些颜色以根据所选颜色更改我网站的颜色。效果很好。

但问题是当我刷新窗口时它显示默认颜色但我想在浏览器刷新时也显示选定的颜色..

提前致谢...!

我正在等待您的回复。

    function openNav() {
        document.getElementById("mySidenav").style.width = "270px";
    }
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
    
    $(document).ready(function () {
        $("#content-width").click(function () {
            $("#content").css({
                "width": "900px",
                "margin": "auto",
                "border": "1px solid #ddd",
                "background-color": "white"
                
            });
            $("#myMap").css({
                "width": "370px",
                "height": "300px",            
    
            });
            $(".navbar-expand-md .navbar-nav .nav-link").css({
                "padding-right": "2.6rem",
                "padding-left": "2.6rem"
            });
            $("body").css("background-color","#f2f2f2");
        });
        $("#original").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#2a3637");
            $("#nav").css("border-bottom", "5px solid #2a3637");
            $("#logo_img").attr("src", "images/logo.png");
            $(".for-bold-text").css("color", "#2a3637");
            $("#content").css({
                "width": "auto",
                "margin": "auto",
                "border": "none",
                "background-color": "white"
            });
            $("#myMap").css({
                "width": "500px",
                "height": "400px",
    
            });
            $(".navbar-expand-md .navbar-nav .nav-link").css({
                "padding-right": "4.25rem",
                "padding-left": "4.25rem"
            });
            $("body").css("background-color", "#fff");
        });
    
        $("#red").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#60100b");
            $("#nav").css("border-bottom", "5px solid #60100b");
            $("#logo_img").attr("src", "images/logo_red.png");
            $(".for-bold-text").css("color", "#60100b");
        });
    
        $("#blue").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#012A59");
            $("#nav").css("border-bottom", "5px solid #012A59");
            $("#logo_img").attr("src", "images/logo_blue.png");
            $(".for-bold-text").css("color", "#012A59");
        });
    
        $("#green").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#41564a");
            $("#nav").css("border-bottom", "5px solid #41564a");
            $("#logo_img").attr("src", "images/logo_green.png");
            $(".for-bold-text").css("color", "#41564a");
        });
    
        $("#yellow").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#586624");
            $("#nav").css("border-bottom", "5px solid #586624");
            $("#logo_img").attr("src", "images/logo_yellow.png");
            $(".for-bold-text").css("color", "#586624");
        });
    
        $("#gray").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#495c5e");
            $("#nav").css("border-bottom", "5px solid #495c5e");
            $("#logo_img").attr("src", "images/logo_gray.png");
            $(".for-bold-text").css("color", "#495c5e");
        });
    
        $("#voilet").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#513168");
            $("#nav").css("border-bottom", "5px solid #513168");
            $("#logo_img").attr("src", "images/logo_voilet.png");
            $(".for-bold-text").css("color", "#513168");
        });
    
        $("#black").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#16627f");
            $("#nav").css("border-bottom", "5px solid #16627f");
            $("#logo_img").attr("src", "images/logo_black.png");
            $(".for-bold-text").css("color", "#16627f");
        });
    
        $("#white").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#3d0d3f");
            $("#nav").css("border-bottom", "5px solid #3d0d3f");
            $("#logo_img").attr("src", "images/logo_white.png");
            $(".for-bold-text").css("color", "#3d0d3f");
        });
    
        $("#purple").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#CD0674");
            $("#nav").css("border-bottom", "5px solid #CD0674");
            $("#logo_img").attr("src", "images/logo_purple.png");
            $(".for-bold-text").css("color", "#CD0674");       
        });
        
    });

    .sidenav {
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(230,240,251);
        overflow-x: hidden;
        transition: 0.5s;
        border:2px ridge #fff;
        border-radius:5px;
        box-shadow: 8px 8px 8px rgba(158,122,122,0.16);
        margin-top: 60px;
    }
    
        .sidenav a:hover {
            color: #fc0606;
        }
    
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 5px;
            font-size: 36px;
           
        }
    
    .icon {
        font-size: 30px;
        cursor: pointer;
        position: fixed;
        left: 0px;
        top: 60px;
        padding: 10px;
        background-color: rgba(0,0,0,0.6);
    }
    
        .icon img {
            height: 30px
        }
    
        .icon img {
            -webkit-animation: rotation 2s infinite linear;
        }
    
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
    
        to {
            -webkit-transform: rotate(359deg);
        }
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }
    
            .sidenav a {
                font-size: 18px;
            }
    }
    #original {
        color:forestgreen;
       text-align:center;
       font-size:20px;
       font-weight:bold;
    
    }
    #red, #blue, #green, #yellow, #gray, #voilet, #black, #white, #purple {
        height: 40px;
        width: 40px;
        float: left;
        margin: 10px;
    }
    #red {
        padding: 15px;
        background-color: #60100b;
    }
    #blue {
        padding: 15px;
        background-color: #012A59;
    }
    #green {
        padding: 15px;
        background-color: #41564a;
    }
    #yellow {
        padding: 15px;
        background-color: #586624;
    }
    #gray {
        padding: 15px;
        background-color: #495c5e;
    }
    #voilet {
        padding: 15px;
        background-color: #513168;
    }
    #black {
        padding: 15px;
        background-color: #16627f;
    }
    #white {
        padding: 15px;
        background-color: #3d0d3f;
    }
    #purple {
        padding: 15px;
        background-color: #CD0674;
    }
    
    #content-width 
    {
        text-align:center;
        font-weight:bold;
        font-size:20px;
        color:#000;
    }
    .index_top {
        background-color: #2a3637;
        height: 35px;
    }
        .index_top p 
        {
            color:#fff;
            padding-top:5px;
        }

  
<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div id="content">
            <div class="container-fluid">
                <div class="index_top">
                    <div class="container">
                        <div class="col-md-12 col-sm-12 col-xl-12 col-12 col-lg-12">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                <p>
                                    <i class="fa fa-phone"></i> &nbsp; &nbsp;123456789
                                </p>
                            </div>
                           
                        </div>
                    </div>
                </div>
    
                <!-- LOGO  IMAGE -->
                
    
    
              
                <!-- SIDE COLOR MENU -->
    
                <div id="mySidenav" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <div>
                        <div id="red"></div>
                        <div id="blue"></div>
                        <div id="green"></div>
                        <div id="yellow"></div>
                        <div id="gray"></div>
                        <div id="voilet"></div>
                        <div id="black"></div>
                        <div id="white"></div>
                        <div id="purple"></div>
                        <div class="clearfix"></div>
                        <p id="original">Show Original</p>
                        <p id="content-width">Low width</p>
                    </div>
    
    
                </div>
                <span class="icon" onclick="openNav()">
                    <img src="images/tool.png" class="img-fluid" alt="open"/>
                </span>
    
    
              
    
            </div>
        </div>
    </body>
    </html>

最佳答案

向框中添加一个类，以便可以显着减少代码。我在下面添加了工作代码，请引用。
HTML

<div>
<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>
<div class="box" id="yellow"></div>
<div class="box" id="gray"></div>
<div class="box" id="voilet"></div>
<div class="box" id="black"></div>
<div class="box" id="white"></div>
<div class="box" id="purple"></div>
<div class="clearfix"></div>
<p id="original">Show Original</p>
<p id="content-width">Low width</p>
</div>

脚本

function openNav() {
document.getElementById("mySidenav").style.width = "270px";
}

function closeNav() {
   document.getElementById("mySidenav").style.width = "0";
}

$(document).ready(function () {
$(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", localStorage.getItem("default"));
$("#content-width").click(function () {
    $("#content").css({
        "width": "900px",
        "margin": "auto",
        "border": "1px solid #ddd",
        "background-color": "white"

    });
    $("#myMap").css({
        "width": "370px",
        "height": "300px",            

    });
    $(".navbar-expand-md .navbar-nav .nav-link").css({
        "padding-right": "2.6rem",
        "padding-left": "2.6rem"
    });
    $("body").css("background-color",localStorage.getItem("default"));
});
$("#original").click(function () {
    $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#2a3637");
    $("#nav").css("border-bottom", "5px solid #2a3637");
    $("#logo_img").attr("src", "images/logo.png");
    $(".for-bold-text").css("color", "#2a3637");
    $("#content").css({
        "width": "auto",
        "margin": "auto",
        "border": "none",
        "background-color": "white"
    });
    $("#myMap").css({
        "width": "500px",
        "height": "400px",

    });
    $(".navbar-expand-md .navbar-nav .nav-link").css({
        "padding-right": "4.25rem",
        "padding-left": "4.25rem"
    });
    $("body").css("background-color", localStorage.getItem("default"));
});

$(".box").click(function () {
    var color = $(this).css("background-color");
    var image = "images/logo_"+$(this).attr("id");
   changeColor(image, color)
});



function changeColor(image, color){
    $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", color);
     $("#nav").css("border-bottom-color", color);
     $("#logo_img").attr("src", image);
     $(".for-bold-text").css("color", color);  
    localStorage.setItem("default", color);     
}

});

关于javascript - 当我们刷新浏览器时如何防止更改所选颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49624650/

javascript - 当我们刷新浏览器时如何防止更改所选颜色

上一篇：javascript - 如何使用带有 html 和 css 的 javascript 或 jquery 将选定节点从一个 TreeView 复制到另一个 TreeView ？

下一篇：php - 我如何找到在 wordpress 中定义 div 的位置