Question

我创建了一个测试网页，可以使用onclick="document.body.className"按钮选择三个不同的主题。这些工作按预期工作，但选择不会在刷新时保存。

我想从localstorage存储和检索用户的选择。在我接近80年的时候，我已经太老了，无法开始学习JavaScript，所以非常感谢帮助使用工作脚本。

如果可以，我会将此功能应用于我所有俱乐部的网页。测试页面位于：http://12phillipstreet.com/alternative-themes.html

Answer 1

当然。

<div class="button-new"><label for="theme">Themes:</label>
    <button class="white" type="submit">.</button>
    <button class="khaki" type="submit">.</button>
    <button class="black" type="submit">.</button>
</div>

的javascript

var body = document.body || document.getElementsByTagName("body")[0];
function retrieveClass(){
    var getClass = localStorage.getItem("changeThemeClass") || "tw";
    body.className=getClass;
}
function changeTheme(elem, cls){
    document.getElementsByClassName(elem)[0].onclick=function(){
        body.className=cls;
        localStorage.setItem("changeThemeClass", cls);
    };
}
retrieveClass();
changeTheme("white", "tw");
changeTheme("khaki", "tk");
changeTheme("black", "tb");

存储和检索localstorage中的主题选择

1 个答案: