javascript - Localstorage 选择 Javascript - 保存样式 CSS

Question

我想制作一个下拉菜单，其中包含三个选项，可以更改 nav 的颜色并将其保存在本地存储中，当您更新页面时，您选择的颜色仍然存在。

我想在 Javascript 中执行此操作，而不需要 jQuery 的任何帮助。

这是我的 HTML:

<nav id="box">
   <select>
      <option value="grey" id="grey">Grey</option>
      <option value="black" id="black">Black</option>
      <option value="green" id="green">Green</option>
   </select>
</nav>

这是我的 CSS:

#box {
    height:50px;
    padding: 5px;
    margin:0 auto;
    font-size:25px;
    text-align: center; 
}
.grey {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #FFF;
}
.black {
    background-color: rgba(0, 0, 0, 0.9);
    color: #FFF;
}
.green {
    background-color: rgba(33.3, 46.7, 7.8);
    border-color: #000;
}

这是我的 JS:

function setUp() {
   document.getElementById("grey").onclick = setSuccessStyle;
   document.getElementById("black").onclick = setErrorStyle;
   document.getElementById("green").onclick = setInfoStyle;
}

function setSuccessStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "grey";   
}

function setErrorStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "black";
}

function setInfoStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "green";
}

我知道我不应该将 onclick 作为“ Action ”，但我不知道如何解决这个问题。

Answer 1

您的代码中有几个问题。

基本上您需要在 select 上使用 onchange 而不是在 option 上使用 click。

用户选择颜色后，您将其存储在 localStorage 中.当页面加载时，您从 localStorage 读取它并用它设置类的值。

由于安全原因，此代码段将无法运行，因此您可以在此 bin 中查看结果

function setUp(sel) {
  var messageBox = document.getElementById("box");
  messageBox.className = sel.value;
  localStorage.setItem('color', sel.value);
}

var selectElm = document.querySelector('select');
selectElm.value = localStorage.getItem('color') || selectElm.querySelector('option').getAttribute('value');
selectElm.onchange();

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(0, 72, 3, 0.47);
  border-color: #000;
}

<nav id="box">
  <select onchange="setUp(this)">
    <option value="grey">Grey</option>
    <option value="black">Black</option>
    <option value="green">Green</option>
  </select>
</nav>