javascript - 在页面上切换选项卡和重新加载时保持动态 CSS

Question

在我的应用程序中，用户可以选择在单击按钮时更改页面的 CSS。如果用户访问页面上的另一个链接或重新加载页面，我希望选择的样式应该保留，即用户不应该一次又一次地选择样式/主题。

我怎样才能做到这一点？

function switch_style (style){
 
    if(theme == "blue"){
        document.getElementById("test").setAttribute('style','color:blue');
    }
    else if(theme == "black"){
        document.getElementById("test").setAttribute('style','color:black');
    }
    
    }
     

<button type="button" class="btn btn-dark" onclick="switch_style('blue') id="blue">Blue</button>
     <button type="button" class="btn btn-dark" onclick="switch_style('black')id="black">Black</button>
     <p id="test">SAMPLE TEXT</p>


     

Answer 1

为了存储值，您需要从浏览器添加 localStorage。这是有关它的详细信息:https://www.w3schools.com/jsref/prop_win_localstorage.asp

您可以使用的示例代码:

function switch_style (style)
{

if(theme == "blue"){
    document.getElementById("test").setAttribute('style','color:blue');
}
else if(theme == "black"){
    document.getElementById("test").setAttribute('style','color:black');
}
localStorage.setItem("style_theme", theme);

}

localstorage

的onload检查

var style_theme = localStorage.getItem("style_theme");
if(!style_theme){
style_theme = "blue" // set default theme which want to.
}
switch_style(style_theme);

基于此你可以调用函数。