问题描述
我想制作一个包含三个选项的下拉菜单,用于更改 nav
的颜色并将其保存在本地存储中,当您更新页面时,您选择的颜色仍然存在.
我想在 Javascript 中执行此操作,而不是在 jQuery 的任何帮助下.
这是我的 HTML:
<option value="grey" id="grey">Grey</option><option value="black" id="black">Black</option><option value="green" id="green">Green</option></选择></nav>
这是我的 CSS:
#box {高度:50px;填充:5px;保证金:0 自动;字体大小:25px;文本对齐:居中;}.灰色的 {背景颜色:rgba(0, 0, 0, 0.5);边框颜色:#FFF;}.黑色的 {背景颜色:rgba(0, 0, 0, 0.9);颜色:#FFF;}.绿色 {背景颜色:rgba(33.3, 46.7, 7.8);边框颜色:#000;}
这是我的 JS:
function setUp() {document.getElementById("grey").onclick = setSuccessStyle;document.getElementById("black").onclick = setErrorStyle;document.getElementById("green").onclick = setInfoStyle;}函数 setSuccessStyle() {var messageBox = document.getElementById("box");messageBox.className = "灰色";}函数 setErrorStyle() {var messageBox = document.getElementById("box");messageBox.className = "黑色";}函数 setInfoStyle() {var messageBox = document.getElementById("box");messageBox.className = "绿色";}
我知道我不应该将 onclick 作为动作",但我不知道如何解决这个问题.
您的代码中有几个问题.
基本上你需要在 select
上使用 onchange
而不是 click
在 option
上.
用户选择颜色后,将其存储在 localStorage
.当页面加载时,您从 localStorage
读取它并使用它的值设置类.
由于安全原因,此代码段将不起作用,因此您可以在此bin 中看到结果>
function setUp(sel) {var messageBox = document.getElementById("box");messageBox.className = sel.value;localStorage.setItem('颜色', sel.value);}var selectElm = document.querySelector('select');selectElm.value = localStorage.getItem('color') ||selectElm.querySelector('option').getAttribute('value');selectElm.onchange();
#box{高度:50px;填充:5px;保证金:0 自动;字体大小:25px;文本对齐:居中;}.灰色的 {背景颜色:rgba(0, 0, 0, 0.5);边框颜色:#FFF;}.黑色的 {背景颜色:rgba(0, 0, 0, 0.9);颜色:#FFF;}.绿色 {背景颜色:rgba(0, 72, 3, 0.47);边框颜色:#000;}
<select onchange="setUp(this)"><option value="grey">Grey</option><option value="black">Black</option><option value="green">Green</option></选择></nav>
I want to make a drop down menu with three selections that change the color of the nav
and saves it in local storage, when you update the page the color you picked is still there.
I want to do this in Javascript and not with any help from jQuery.
Here is my 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>
Here is my 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;
}
Here is my 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";
}
I know that I'm not supposed to have onclick as the "action" but I have no idea how to solve this.
You have couple of issues in your code.
Basically you need to use onchange
on the select
but not click
on the option
.
After the user pick a color, you store it in the localStorage
. When the page load, you read it from the localStorage
and set the class with it value.
This snippet will not work because of security reason so you can see the result in this 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>
这篇关于Localstorage 选择 Javascript - 保存样式 CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!