如何通过javascript一次更改多个网页的颜色？
[英]How to change color of multiple webpages at once by javascript?
问题描述
I'm trying to change color of a html webpage and it's working without any problem. 
我正在尝试更改html网页的颜色，并且可以正常工作。 But I've several webpages, and I want the colors of all pages to be changed on a press of a button, not just the one. 但是我有几个网页，我希望所有按钮的颜色都可以通过按下一个按钮而不仅仅是一个按钮来更改。 There will a settings page where color options will be there where user can change the color of all webpages by choosing any color. 将出现一个设置页面，其中将提供颜色选项，用户可以通过选择任何颜色来更改所有网页的颜色。
Code for changing color of single page: 更改单页颜色的代码：
$(document).ready(function() { $(".btn").click(function() { if ($(".container").hasClass("night")) { $(".container").removeClass("night"); $(".btn").removeClass("btn-night").text("Night Mode Off"); $(".text").removeClass("text-night"); $(".p-sm").text("Turn on the night mode to change the background to dark."); } else { $(".container").addClass("night"); $(".btn").addClass("btn-night").text("Night Mode On"); $(".text").addClass("text-night"); $(".p-sm").text("Night mode is active. Turn off the night mode to change the background to light."); } }); });
body, .container { height: 100vh; } .container { width: 100%; display: flex; justify-content: center; animation-name: daytransition; animation-duration: 3s; } @keyframes daytransition { from { background-color: #040018; } to { background-color: #fff; } } .text { position: absolute; top: 30%; font-size: 20px; text-align: center; } .p-lg { font-size: 28px; } .p-sm { margin: 30px; } .night { animation-name: nighttransition; animation-duration: 3s; background-color: #040018 !important; } @keyframes nighttransition { from { background-color: #fff; } to { background-color: #040018; } } .text-night { color: #c5b2cc; } .btn { margin: 30px; background-color: #6f6f8e !important; color: #FBFFC9 !important; } .btn-night { background-color: #FBFFC9 !important; color: #6f6f8e !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <html> <body> <div class="container"> <div class="text"> <p class="p-lg">Demo of Day and Night Themes</p> <button class="btn btn-lg">Night Mode Off</button> <p class="p-sm">Turn on the night mode to change the background to dark.</p> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2018-04-10 14:14:50
You want to persist state between different pages. 您要在不同页面之间保持状态。 You can do it with a session storage 您可以使用会话存储来做到这一点
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.