我想知道当我选择不同的颜色时如何更改网站的颜色。例如，我的网站背景是白色的，如果我选择黑色，我的网站背景颜色会变为黑色。我已经应用了 CSS，但更改并未反映在所有页面中。在我作为颜色主题黑色单击的任何页面上，该特定页面的颜色都会更改。其余所有页面保持白色。您能告诉我如何在单击按钮时更改整个网站的背景颜色。
【问题讨论】：
标签： javascript jquery html
这里有一些代码——虽然这里不能使它成为可运行的 sn-p——在这个 jsfiddle 中工作——https://jsfiddle.net/bbb7wpot/
<button onclick="changeBackground();">
Change
</button>
脚本
在页面加载时，检查是否选择了背景颜色
这并不一定要在页面加载时，只要在 body 元素顶部的脚本中就可以了
if(localStorage.bgcolor) {
document.body.style.backgroundColor = localStorage.bgcolor;
}
然后是处理点击改变的函数
function changeBackground() {
var currentValue = localStorage.bgcolor || 'white'; // default is white
currentValue = currentValue == 'white' ? 'black' : 'white';
localStorage.setItem('bgcolor', document.body.style.backgroundColor = currentValue);
}
注意：我没有将 jquery 用于这样的基本任务
例如使用 CSS 和 body 标签上的类
<style>
body.white .target {
background-color: white;
}
body.black .target {
background-color: black;
}
</style>
和
<body>
<div class="target">This will change background</target>
...
...
</body>
document.body.className = localStorage.bgcolor || 'white';
然后是处理点击改变的函数
function changeBackground() {
var currentValue = localStorage.bgcolor || 'white'; // default is white
currentValue = currentValue == 'white' ? 'black' : 'white';
localStorage.setItem('bgcolor', document.body.className = currentValue);
}
【讨论】：
<!-- a full working example including inlined StyleChanger -->
<html>
<head>
<style>
/* put this style into css file and apply all your page body */
.my_custom_identifier { background-color:darkOliveGreen;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body class="my_custom_identifier">
<h1>TITLE</h1>
<h2>subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non saepe obcaecati recusandae autem ratione natus molestiae vero libero cumque placeat dolorem odit molestias excepturi suscipit voluptatem perspiciatis, magnam dicta velit.</p>
<button>test</button>
<script>
/* create new js file and add into htnl */
var StyleChanger = function(id) {
id = id.toLowerCase().trim();
let findSS = function() {
for (let ss of document.styleSheets)
for (let rule of ss.cssRules)
if (rule.selectorText.toLowerCase().substr(1)===id)
return ss;
}
let ss = findSS();
if (!ss) return undefined;
ss.change = function(originalValue, newValue) {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) { // init original rules at first use
rule.originalStyle = {};
for (let style of rule.style)
rule.originalStyle[style] = rule.style[style];
}
for (let style in rule.originalStyle) { // replace rules from original list
if (rule.originalStyle[style]===originalValue)
rule.style[style] = newValue;
}
}
}
ss.reset = function() {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) continue;
for (let style in rule.originalStyle)
rule.style[style] = rule.originalStyle[style];
}
}
return ss;
}
// find the stylesheet to change
var ss = StyleChanger("my_custom_identifier");
$( "button" ).click(function() {
ss.change("darkolivegreen", "blue");
});
</script>
</body>
</html>
【讨论】：
如果您希望更改在页面刷新或移动到其他页面后保持不变，您可能需要使用 javascript。
存储用户的颜色偏好（您可以使用浏览器的本地存储或 cookie），然后运行脚本来获取该值并设置网页的背景颜色。
使用 localStorage 的示例：
从localStorage设置背景颜色的功能：
var apply_global_theme = function(){
var bg_color = localStorage.getItem("global_theme") || '#fff';
$("body").css("background", bg_color);
}
更改全局背景颜色的功能（假设 new_color 是您的颜色偏好，例如：'red' 或 '#f00'）：
localStorage.setItem("global_theme", new_color);
apply_global_theme()
在页面加载时应用背景颜色：
$(document).ready(function(){
apply_global_theme();
})
【讨论】：
将此 sn-p 添加到您的身体中：
style="background-color:red;"
【讨论】：
on button click