gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:22:28 25 4
gpt4 key购买 nike

对不起我的英语..

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

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

提前致谢...!

我正在等待您的回复。

    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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com