Question

我正在创建一个网页，其中包含用于将主题从浅色更改为黑色并返回首页的按钮。但是，如果我点击进入另一个页面，我希望主题保留。

有没有办法告诉浏览器根据用户是使用浅色还是黑暗主题动态选择css文件？

这里是我在头版上的参考：

使用Javascript：

function swapStyleSheet(sheet, text){
//variables to access elements in the DOM
var styleSheet = document.getElementById('pagestyle');
var defaultText = document.getElementById('styleSwitchText');

styleSheet.setAttribute('href', sheet); //changes the stylesheet
defaultText.style.display = "none"; //hides initial text

//creates p element and appends text parameter to it
var pElement = document.createElement('p');
var textnode = document.createTextNode(text); 
pElement.appendChild(textnode);

var item = document.getElementById('swapStyleButtons');
//replaces the text node in the p each time button is clicked
item.replaceChild(pElement, item.childNodes[0]);
}

HTML：

<div id="swapStyleButtons">
    <p id="styleSwitchText">Don't like the style? Try Night Mode!</p>
    <button id='night' onclick='swapStyleSheet("dark.css", "Think Night Mode sucks? Switch back!")'>Night</button>
    <button id='default' onclick='swapStyleSheet("recipes.css", "Liked it better before? Try Night Mode!")'>Default</button>
</div>

这在头版上完美运行。我可以为其他页面重复此过程，但用户必须按下每个页面上的按钮，这显然有点烦人。

1 html页面可以通过这种方式与另一个页面进行通信吗？

Answer 1

使用HTML5，您可以使用HTML本身存储数据，而不需要使用其他语言。

function setColorTheme(curColorTheme)
{
    if(typeof(Storage) !== "undefined") {
        localStorage.setItem("colorTheme", curColorTheme);
    } else {
        // Backup cookie Support
    }
}

function getColorTheme()
{
    if(typeof(Storage) !== "undefined") {
        return localStorage.getItem("colorTheme");
    } else {
        // Backup cookie Support
    }
}

这是一个教程：

http://www.w3schools.com/html/html5_webstorage.asp

Answer 2

内部按钮单击事件以选择样式表编写以下代码以将所选样式表设置为本地存储

localStorage.setItem("Selected_Style_sheet_name", "yourstylesheetname");

在主页中设置所选主题

 var btn1 = document.getelementbyid("btnTheme1");
    var btn2 = document.getelementbyid("btnTheme2");

    btn1.onclick =function(){
    localStorage.setItem("Selected_Style_sheet_name", "Theme1.css");

    }
    btn2.onclick =function(){
    localStorage.setItem("Selected_Style_sheet_name", "Theme2.css");

    }

现在除了主页之外，每个页面都添加以下代码

if(localStorage.getItem("Selected_Style_sheet_name") !== null){

    styleSheet.setAttribute('href', localStorage.getItem("Selected_Style_sheet")); 

}

有没有办法根据不同页面的样式表更改页面的样式表？

2 个答案: