Question

试图让我的页面收集输入的颜色并将其保存到localStorage。然后我想要用该颜色设置div的背景。然后必须将颜色用于网站每个页面上的div（主要内容div位于每个页面上且具有相同的ID）。

这是我到目前为止所做的。

Jquery的：

    if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}
console.log(localStorage);


$(document).ready(function () {
    getColour = localStorage.background;
    $('.palette').click(function () {
        getColour = localStorage.background;
        $("#content").removeClass(getColour);
        localStorage.removeItem('background');
        var setColour = $(this).attr("id");
        $("#content").addClass(setColour);
        localStorage.setItem("background", setColour);
    });
});

HTML

<div id="colours">
    <div id="colorPicker1" class="palette colorPicker1"></div>
    <div id="colorPicker2" class="palette colorPicker2"></div>
    <div id="colorPicker3" class="palette colorPicker3"></div>
    <div id="colorPicker4" class="palette colorPicker4"></div>
    <div id="colorPicker5" class="palette colorPicker5"></div>
    <div id="result"></div>
</div>
    <div id="content"></div>

CSS

#content{
    text-align:justify;
    position:relative;
    margin:45px auto 0px auto;
    width:85%;
    height:100%;
    border-radius:25px;
    padding: 10px 10px 10px 10px;
    z-index:1;
    border:1px solid black;
}
.palette {
    cursor: pointer;
    height: 18px;
    width: 18px;
    border: 2px solid #000
}

.colorPicker1 {
    background: /*#e1ffff;*/none;
}
#colorPicker1 {
    position:fixed;
    top:15px;
    left:15px;
}
.colorPicker2 {
    background: #ffffb8;
}
#colorPicker2 {
    position:fixed;
    top:15px;
    left:40px;
}

.colorPicker3 {
    background: #ffc5ff;
}
#colorPicker3 {
    position:fixed;
    top:15px;
    left:60px;
}

.colorPicker4 {
    background-color: #99ff9c;
}
#colorPicker4 {
    position:fixed;
    top:15px;
    left:90px;
}

.colorPicker5 {
    background: #97acff;
}
#colorPicker5 {
    position:fixed;
    top:15px;
    left:125px;
}

#colours {
    position:relative;
    height:30px;
    width:100%;
    border:1px solid red;
}

我是创建网站的新手，而且这个网站正在进行Uni任务。我正在尝试在网站中实现辅助功能选项，以更改div的背景颜色，使阅读更容易。我已经将它的工作存储到localStorage中，它会改变我正在浏览的页面上的颜色，但是当我更改页面时会重置。我在每个页面上运行相同的脚本，并且本地运行该站点而不是Web托管。

对此的任何帮助都会很棒。

干杯

的Blinky

Answer 1

移动

    if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}

进入document.ready。现在你正试图在一个尚未渲染的元素上设置一个类。

使用本地存储更改div背景颜色

1 个答案: