Javascript 如何允许用户使用颜色选择器选择网站的背景颜色并存储？ 函数setColor（）{ getColor（）； if（localStorage.getItem（'background'）！==null）{ getcolor=localStorage.background； $（'body'）.css（'background'，getcolor）； } } 函数getColor（）{ localStorage.getItem（'background'）=选择器； }

我想采取自定义颜色的用户输入，并更新相应的网站背景

将方法更改为（注释内联）

---

Stackoverflow代码段似乎不喜欢使用

localStorage

，因此下面是一个如何读取和写入颜色的示例。我注释掉了要在应用程序中使用的本地存储代码，而不是我用来演示代码的temp变量

下面的示例使用

onchange

并在加载时存储当前颜色，具有可单击按钮应用的默认颜色，还有另一个按钮可应用存储/选定颜色

var defaultColor='#00ff00'；
var存储；
函数setColor（）{
//localStorage.setItem（'background'，$（'#picker'）.val（）；
tempStorage=$（'#picker'）.val（）；
$（'body'）.css（'background-color'，tempStorage）；
applyBackgroundColor（临时存储）；
}
函数getColor（）{
//getItem（'background'）；
$（'#picker'）.val（临时存储）；
applyBackgroundColor（临时存储）；
}
函数getDefaultColor（）{
$（'#picker'）.val（默认颜色）；
applyBackgroundColor（默认颜色）；
}
函数applyBackgroundColor（colorValue）{
$（'body'）.css（'background-color'，colorValue）；
}
setColor（）

应用默认值
应用存储的
有很多颜色选择器插件。尝试获取1并尝试找出“ele”作为函数条件的含义？
ele
是单击的元素。请注意，我在调用
setColor（this）
时通过了
this
。不幸的是，我没有成功。我应该从CSS中删除背景色吗？这会影响它吗？你能分享你的尝试吗？使用背景色也可以尝试，默认值的按钮在代码段中不起作用。。。我不确定你的意思是什么。我的意思是当页面刷新时，它不用于保存值。我希望你不仅仅是将答案复制到你的应用程序中，希望它能工作，因为其中有部分纯粹是为了演示代码。我还在页面加载期间调用
setColor（）
，以使此演示正常工作，而这不是您希望在实际应用程序中执行的操作！尽管您可能希望在加载时调用
getColor（）
。默认按钮仅用于此特定示例，用于显示如何将颜色应用于选择器。set和get方法包含注释掉的本地存储代码。您可以将示例中的代码复制到应用程序中，并根据需要进行更新。演示包含所有相关信息，如何在应用程序中实现相关部分取决于您自己。
<input name="Color Picker" id="picker" type="color"/>

document.querySelector( "input[type='color']" ).addEventListener( "click", function(){
      setColor(this);        
});
function setColor( ele ){
    getColor();
    if( localStorage.getItem('background') ) { //notice that empty value is also checked
        $('body').css('background-color', ele.value ); //value directly picked from ele
    }
}
function getColor( ele ){
    localStorage.setItem('background', ele.value ); //notice that ele's value is picked up
} 

document.querySelector( "input[type='color']" ).addEventListener( "click", function(){
    if( this.value  ) { //notice that empty value is also checked
        $('body').css('background-color', this.value ); 
        localStorage.setItem('background', this.value ); 
    }
});