网站背景颜色更改

Question

网站背景颜色更改

3

我想知道如何在选择不同颜色后更改我的网站的颜色。例如，我的网站背景是白色的，如果我选择黑色，我的网站背景颜色将变为黑色。我已经应用了CSS，但是这些更改未反映在所有页面上。无论我点击哪个页面作为黑色主题，该特定页面的颜色都会改变。其余所有页面仍然是白色的。请告诉我如何在按钮单击时更改整个网站的背景颜色。

- Harshita Sinha

1

取决于您如何执行此操作以及您希望每个页面如何知道您想要的颜色。 - Jaromanda X

你的问题已经有答案了！请查看这个和这个。 - Dubois

可能是JavaScript点击更改背景颜色的重复内容。 - Yash Parekh

1

不确定那些所谓的重复内容如何回答问题 - 它们只是改变当前页面的颜色，对于“记住”选择什么也没有作用。 - Jaromanda X

4个回答

0

如果您希望更改在页面刷新或移动到其他页面后仍然保持，请考虑使用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();
})

- anilkumarggk

0

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

- Sandip Solanki

-1

将此代码片段添加到您的主体中：

  style="background-color:red;"

- User123123

在按钮点击时，这会如何改变颜色？ - Jaromanda X

在按钮点击事件中，将以下CSS添加到他们想要的位置 $(target).css('background-color','red'); - User123123

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jaromanda X · Accepted Answer

这里有一些代码 - 无法在此处运行 - 在这个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);
}