Question

我的目标很简单。我有一个脚本，通过单击更改背景颜色，并通过第二次单击将颜色返回到基本颜色。

CSS

body { 
    background-color: white;
}

.negative {
    background-color: black;
}

的Javascript

$(zasuvka).click(function(){
    $("body").toggleClass(negative);
});

当我浏览网页时，我的意思是当我点击我的网页的菜单链接（联系人，图库......）时，背景颜色将返回到基本颜色。我想让脚本永久化，直到再次按下运行此脚本的按钮。我希望你明白。非常感谢您的帮助。

Answer 1

考虑使用localStorage保存类的切换状态，然后在页面加载时重新设置它。但请记住，这会冒FOUC（无格式内容的Flash）的风险，因为在脚本加载之前背景将是白色的，之后它可能会突然变为黑色。您也可以将值保存在cookie中，并使用服务器端代码设置初始背景颜色。

Answer 2

使用jquery cookie https://github.com/carhartl/jquery-cookie在请求之间保存状态，而不是在刷新时检查状态。

Answer 3

<script>

    var bg = localStorage.getItem('bg');
    if (bg && bg == 'neg') $('body').addClass('negative');

    $('#zasuvka').click(function(){
        $("body").toggleClass('negative');
        localStorage.setItem('bg', (bg&&bg=='neg') ? 'norm' : 'neg');
    });

</script>

FIDDLE

如何使用脚本设置永久背景颜色

3 个答案: