如何更改站點 colors 並保存到本地存儲？
[英]How to change site colors and save in Local Storage?
問題描述
如何更改站點 colors 並保存在 localStorage 中？
我在 jQuery 中有一個 function 允許用戶更改我網站的背景顏色。 問題是，如果他們刷新頁面背景顏色會自動恢復為默認值。 我如何將 localStorage 與這個 jQuery function 一起使用？
$(document).ready(function() { /*-- Change color bg WPEAR.COM --*/ var resultPlaceholder = $('body'); var greenAndWhite = $('#green-and-white'); var redAndYellow = $('#red-and-yellow'); var blueAndPink = $('#blue-and-pink'); var yellowAndPink = $('#yellow-And-Pink'); greenAndWhite.click(function() { resultPlaceholder.css({ 'background': 'green' }); }); redAndYellow.click(function() { resultPlaceholder.css({ 'background': 'red' }); }); blueAndPink.click(function() { resultPlaceholder.css({ 'background': 'blue)' }); }); yellowAndPink.click(function() { resultPlaceholder.css({ 'background': 'yellow' }); }); })
/* -- change color wpear.com -- */.button-wrapper { position: fixed; left: 0; display: grid; top: 40%; margin: 0; }.change-color { width: 40px; height: 40px; cursor: pointer; border: none; } #red-and-yellow { background: red; } #green-and-white { background: green; } #blue-and-pink { background: blue; } #yellow-And-Pink { background: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class='button-wrapper'> <button class='change-color' id='green-and-white' /> <button class='change-color' id='red-and-yellow' /> <button class='change-color' id='blue-and-pink' /> <button class='change-color' id='yellow-And-Pink' /> </div>
3 個解決方案
解決方案1
1 2022-07-21 07:42:22
- 編寫一個函數將所選主題保存到
localStorage：
function saveTheme(color) {
localStorage.setItem('theme', color)
}
- 在每次更改時保存主題：
greenAndWhite.click(function(){
resultPlaceholder.css({'background':'var(--linear-graBO)'});
saveTheme('var(--linear-graBO)')
});
// do this for each change
- 當頁面加載時 - 檢查 localStorage 保存的主題 [放入
<head>以便它應該立即運行]：
const savedTheme = localStorage.getItem('theme')
if (savedTheme) {
document.body.style.background = savedTheme
}
解決方案2
0 已采納 2022-07-21 08:28:12
要執行您需要的操作，只需在單擊處理程序中設置 localStorage 值。 然后將其讀回並在頁面下次加載時進行設置：
另請注意，您的 JS 代碼可以通過對所有button元素使用相同的事件處理程序並設置背景以匹配單擊的按鈕來進行干燥。
jQuery($ => {
let $body = $('body');
let defaultBgColor = localStorage.getItem('body-bg-color');
defaultBgColor && $body.css('background-color', defaultBgColor);
$('.change-color').on('click', e => {
let bgColor = $(e.target).css('background-color');
$body.css('background-color', bgColor);
localStorage.setItem('body-bg-color', bgColor);
});
});
最后，注意使用background-color ，而不是background 。 后者是一種快捷方式，僅使用它來設置背景顏色可能會覆蓋其他與背景相關的樣式。
這是一個有效的jsFiddle 示例，因為 SO 片段是沙盒的，並且不允許訪問 localStorage。
解決方案3
0 2022-11-29 12:57:26
參考您今天刪除的問題：
如果您還希望文本隨正文背景一起改變顏色，您可以使用相同的 jQuery css()方法來操作文本的color屬性：
$('#text').css('color', bgColor);
工作示例：
- 我刪除了
localStorage的東西，以便在堆棧片段中進行演示 - 我為文字添加了白色背景以查看效果
jQuery($ => { let $body = $('body'); let defaultBgColor = 'white'; defaultBgColor && $body.css('background-color', defaultBgColor); $('.change-color').on('click', e => { let bgColor = $(e.target).css('background-color'); $body.css('background-color', bgColor); $('#text').css('color', bgColor); defaultBgColor = bgColor; }); });
.button-wrapper { position: fixed; left: 0; display: grid; top: 40%; margin: 0; } #text { background-color: white; }.change-color { width: 40px; height: 40px; cursor: pointer; border: none; } #c1 { background: red; color: #fff; } #c2 { background: green; color: #000; } #c3 { background: blue; color: #fff; } #c4 { background: yellow; color: #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='button-wrapper'> <button class='change-color' id='c1' /> <button class='change-color' id='c2' /> <button class='change-color' id='c3' /> <button class='change-color' id='c4' /> </div> <div id='text'> hello every body </div>
如果您還想更改文本 colors，則需要定義顏色組合。 例如，可以使用if else鏈、 switch case語句、數組或 object 來完成。但請注意， css()方法僅返回 RGB colors...
object 中的定義：
const color_combinations = {
'rgb(255, 0, 0)': 'yellow',
'rgb(0, 128, 0)': 'white',
'rgb(0, 0, 255)': 'orange',
'rgb(255, 255, 0)': 'black'
};
...
let bgColor = $(e.target).css('background-color');
$('#text').css('color', color_combinations[bgColor]);
工作示例：
jQuery($ => { let $body = $('body'); let defaultBgColor = 'white'; const color_combinations = { 'rgb(255, 0, 0)': 'yellow', 'rgb(0, 128, 0)': 'white', 'rgb(0, 0, 255)': 'orange', 'rgb(255, 255, 0)': 'black' }; defaultBgColor && $body.css('background-color', defaultBgColor); $('.change-color').on('click', e => { let bgColor = $(e.target).css('background-color'); $body.css('background-color', bgColor); $('#text').css('color', color_combinations[bgColor]); defaultBgColor = bgColor; }); });
.button-wrapper { position: fixed; left: 0; display: grid; top: 40%; margin: 0; }.change-color { width: 40px; height: 40px; cursor: pointer; border: none; } #c1 { background: red; color: #fff; } #c2 { background: green; color: #000; } #c3 { background: blue; color: #fff; } #c4 { background: yellow; color: #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='button-wrapper'> <button class='change-color' id='c1' /> <button class='change-color' id='c2' /> <button class='change-color' id='c3' /> <button class='change-color' id='c4' /> </div> <div id='text'> hello every body </div>
如何保存到本地存儲
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.