Question

我想知道当我选择不同颜色时如何更改网站的颜色。例如，我的网站背景是白色的，如果我选择黑色，我的网站背景颜色会变为黑色。我已经应用了CSS，但更改并未反映在所有页面中。在我点击哪个页面作为黑色的颜色主题时，该特定页面的颜色会发生变化。休息所有页面保持白色。您能告诉我如何在点击按钮时更改整个网站的背景颜色。

Answer 1

这里有一些代码 - 虽然不能使它成为一个可运行的片段 - 在这个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进行这样的基本任务

在body标签上使用CSS和类，例如

<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);
}

Answer 2

如果您希望在页面刷新或移动到其他页面后更改是持久的，您可能需要使用javascript。

存储用户的颜色首选项（您可以使用浏览器的本地存储空间或Cookie），然后运行脚本来获取该值并设置网页的背景颜色。< / p>

使用localStorage执行此操作的示例：

从localStorage设置背景颜色的功能：

var apply_global_theme = function(){
    var bg_color = localStorage.getItem("global_theme") || '#fff';
    $("body").css("background", bg_color);
}

更改全局背景颜色的功能（假设 new_color 是您的颜色偏好，例如：＆＃39;红色＆＃39;或＆＃39;＃f00＆＃39;）：

localStorage.setItem("global_theme", new_color);
apply_global_theme()

在页面加载时应用背景颜色：

$(document).ready(function(){
apply_global_theme();
})

Answer 3

<!-- 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>

Answer 4

将此代码段添加到您的身体：

  style="background-color:red;"

网站背景颜色变化

4 个答案: