Fatal编程技术网

Javascript 网站背景颜色变化

javascript jquery html

Javascript 网站背景颜色变化,javascript,jquery,html,Javascript,Jquery,Html,我想知道，当我选择不同的颜色时，如何更改网站的颜色。例如，我的网站背景为白色，如果我选择黑色，我的网站背景颜色将变为黑色。我已经应用了CSS，但更改并没有反映在所有页面中。无论我在哪个页面上单击颜色主题为黑色，该特定页面的颜色都会发生变化。其余所有页面保持白色。您能告诉我如何在点击按钮时更改整个网站的背景色。将此片段添加到您的身体中： style="background-color:red;" 这里有一些代码-虽然不能使其成为可运行的代码段-在这个JSFIDLE中工作- 然后是处理单击更改

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

将此片段添加到您的身体中：

  style="background-color:red;"
这里有一些代码-虽然不能使其成为可运行的代码段-在这个JSFIDLE中工作-

然后是处理单击更改的函数

function changeBackground() {
    var currentValue = localStorage.bgcolor || 'white'; // default is white
    currentValue = currentValue == 'white' ? 'black' : 'white';
    localStorage.setItem('bgcolor', document.body.style.backgroundColor = currentValue);
}

function changeBackground() {
    var currentValue = localStorage.bgcolor || 'white'; // default is white
    currentValue = currentValue == 'white' ? 'black' : 'white';
    localStorage.setItem('bgcolor', document.body.className = currentValue);
}
注意：我没有将jquery用于这样的基本任务

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

<style>
    body.white .target {
        background-color: white;
    }
    body.black .target {
        background-color: black;
    }
</style>
如果希望在页面刷新或移动到其他页面后保持更改，则可能需要使用javascript

存储用户的颜色首选项您可以使用浏览器的本地存储或cookies，并运行脚本获取该值并设置网页的背景颜色

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

用于从localStorage设置背景色的函数：

函数更改全局背景颜色假设新颜色是您的颜色首选项，例如：“红色”或“f00”：

localStorage.setItem("global_theme", new_color);
apply_global_theme()
在页面加载时应用背景色：

$(document).ready(function(){
apply_global_theme();
})
这取决于你是如何完成的，以及你希望每一页都知道你想要什么颜色。你的问题已经有答案了！检查和可能的重复不确定这些假定的重复如何回答问题-他们所做的只是更改当前页面的颜色，他们不做任何事情来记住选择这将如何更改按钮单击事件上的颜色将此css添加到他们想要的$target处。css“background-color”（背景色），“red”（红色）；我可以改变身体的背景颜色。很好用。如何更改网站上不同部分、页眉和页脚的背景色。默认情况下，背景色不是白色。请使用css和类 
function changeBackground() {
    var currentValue = localStorage.bgcolor || 'white'; // default is white
    currentValue = currentValue == 'white' ? 'black' : 'white';
    localStorage.setItem('bgcolor', document.body.className = currentValue);
}

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

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

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

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