关键词：
【中文标题】如何使用 Javascript 保存 CSS 更改？【英文标题】：How can I save CSS changes with Javascript? 【发布时间】：2018-01-19 21:46:29 【问题描述】：我创建了一个页面，人们可以在其中使用 javascript 自行更改背景。但是当我在页面之间交换时，设置就消失了。我怎样才能解决这个问题：“HTML”、“CSS”和“JAVASCRIPT”？
这是我的html代码：
<input type="image" id="bc-wood-button" src="images/background-wood.jpg" >
<input type="image" id="bc-nature-button" src="images/background-nature.jpg" >
这是我的 Javascript：
$(document).ready(function()
$('body').css('background-image', 'url("images/background-wood.jpg")');
document.getElementById("bc-wood-button").addEventListener("click", WoodenBackground);
document.getElementById("bc-nature-button").addEventListener("click", NatureBackground);
function WoodenBackground()
$('body').css('background-image', 'url("images/background-wood.jpg")');
function NatureBackground()
$('body').css('background-image', 'url("images/background-nature.jpg")');
);
【问题讨论】：
你试过cookies、localStorage还是sessionStorage？ 存储在localStorage，当你进入一个新页面时，从存储中取出它并重新设置CSS。
保存在哪里？到你的服务器？那将需要一些服务器端编程。不过，您可以使用localStorage 在客户端机器上保存一些信息。
【参考方案1】：
正如 cmets 中的其他建议，您可以使用 localStorage 或 sessionStorage 来保存和加载数据。
$(document).ready(function()
// ulrs of some existing backgrounds
var backgrounds =
wood: "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.walldevil.com%2Fwallpapers%2Fa81%2Fwallpapers-dragon-art-yellow-artistic-silver-images-backgrounds-nature-abstract-background-desktop-cool.jpg&f=1",
nature: "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.freepik.com%2Ffree-photo%2Fnature-design-with-bokeh-effect_1048-1882.jpg&f=1"
;
var settings = loadSettings();
setBackground(settings.background);
document.getElementById("bc-wood-button").addEventListener("click", WoodenBackground);
document.getElementById("bc-nature-button").addEventListener("click", NatureBackground);
function setBackground(background)
$('body').css('background-image', 'url("'+background+'")');
localStorage.setItem("settings.background", background);
function WoodenBackground()
setBackground(backgrounds.wood);
function NatureBackground()
setBackground(backgrounds.nature);
function loadSettings()
var background = localStorage.getItem("settings.background");
// at first run there is no data, also user may anytime clear storage
if (!background)
background = backgrounds.wood;
return background: background
);
jsfiddle
【讨论】：
如何读取 JSON 文件、更改一些值并保存它。使用 FS/Javascript [重复]
】如何读取JSON文件、更改一些值并保存它。使用FS/Javascript[重复]【英文标题】：HowdoIreadaJSONfile,changesomevalues,andsaveit.UsingFS/Javascript[duplicate]【发布时间】：2021-07-2721:52:53【问题描述】：我当前的代码如下。bot.on(\'message\',mssg=>io.... 查看详情
如何使用 JavaScript 函数更改 CSS 值（颜色标签）？ [复制]
】如何使用JavaScript函数更改CSS值（颜色标签）？[复制]【英文标题】：HowtochangetheCSSvalue(colortag)usingaJavaScriptFunction?[duplicate]【发布时间】：2018-07-0812:21:04【问题描述】：我想使用JavaScript函数更改样式表的颜色或背景颜色的值。例... 查看详情
如何使用 css 和/或 javascript 动态更改样式
】如何使用css和/或javascript动态更改样式【英文标题】：Howtodynamicchangestyleswithcssand/orjavascript【发布时间】：2019-08-1809:58:59【问题描述】：我有一个按钮，我需要在单击它时更改一些样式。我可能可以通过添加和删除一些类轻松... 查看详情
如何在javascript中使用css更改对类中字符串的所有引用？
】如何在javascript中使用css更改对类中字符串的所有引用？【英文标题】：HowdoIchangeallreferencestoastringinaclasswithcssinjavascript?【发布时间】：2021-12-1417:47:26【问题描述】：您好，我正在尝试针对具有“post-state”类的每个项目中对短... 查看详情
是否可以使用 JavaScript 更改 CSS？ [复制]
】是否可以使用JavaScript更改CSS？[复制]【英文标题】：isitpossibletochangeCSSwithJavaScript?[duplicate]【发布时间】：2021-06-3004:33:39【问题描述】：我正在尝试添加“过滤器：模糊5px；”单击某个按钮时影响CSS到Id。我想知道如何在按下按... 查看详情
如何使用 Chrome 工作区保存使用 Angular2 + webpack 在本地更改的 CSS？
】如何使用Chrome工作区保存使用Angular2+webpack在本地更改的CSS？【英文标题】：HowtouseChromeWorkspacestosaveCSSchangedlocallywithAngular2+webpack?【发布时间】：2017-04-0822:24:52【问题描述】：我正在尝试使用Webpack和webpack-dev-server构建一个Angular2... 查看详情
使用 Javascript/jQuery 和 CSS 更改 PNG 颜色
】使用Javascript/jQuery和CSS更改PNG颜色【英文标题】：ChangePNGColorusingJavascript/jQueryandCSS【发布时间】：2012-02-2802:45:51【问题描述】：我有一个blackheartPNGimage我想用不同的颜色显示。如何使用javascript/css/jquery更改心脏的颜色？我正在... 查看详情
如何在没有 CSS 且仅使用 JavaScript 或 jQuery/jQueryMobile 的情况下更改设备方向？
】如何在没有CSS且仅使用JavaScript或jQuery/jQueryMobile的情况下更改设备方向？【英文标题】：HowtochangedeviceorientationwithoutCSSandonlywithJavaScriptorjQuery/jQueryMobile?【发布时间】：2017-02-0320:54:32【问题描述】：我有以下HTML结构：<divdata-rol... 查看详情
使用 JavaSCript 在 IE 中更改 ID css
】使用JavaSCript在IE中更改IDcss【英文标题】：ChangeIDcssinIEwithJavaSCript【发布时间】：2020-09-2813:20:16【问题描述】：我试图弄清楚如何将css显示从无更改为使用javascript阻止但仅适用于IE。目前我有这段代码，但它不会更改ID#backfill-im... 查看详情
如何将 Chrome 开发人员工具 Inspector 中的 CSS 更改保存到 .vue 文件
】如何将Chrome开发人员工具Inspector中的CSS更改保存到.vue文件【英文标题】：HowtosaveCSSchangesfromChromedevelopertoolsInspectorto.vuefile【发布时间】：2019-12-2215:17:12【问题描述】：我正在尝试设置一个工作流程，我想在其中使用ChromeDevTools... 查看详情
如何使用 UndoManager 确定文档是不是有未保存的更改
...】：2013-11-0907:31:56【问题描述】：我对ACE编辑器和一般的javascript还是很陌生，但是除了以下内容之外，我已经设法实现了我想要的大部分内容：我想根据文档 查看详情
javascript使用javascript更改css（javascript）(代码片段)
无法使用 javascript 更改 css
】无法使用javascript更改css【英文标题】：Unabletochangecssusingjavascript【发布时间】：2018-12-1202:49:48【问题描述】：在handsontable的_afterOnCellMouseOver函数中，当我将鼠标悬停在列标题上时，我试图更改它们的css颜色属性。_afterOnCellMouseO... 查看详情
使用 Javascript 更改 CSS 值
】使用Javascript更改CSS值【英文标题】：ChangingCSSValueswithJavascript【发布时间】：2010-10-0815:34:03【问题描述】：使用javascript设置内联CSS值很容易。如果我想改变宽度并且我有这样的html：<divstyle="width:10px"></div>我需要做的就... 查看详情
javascript - 了解 CSS 类如何更改/更新
】javascript-了解CSS类如何更改/更新【英文标题】：javascript-understandinghowcssclasseschange/update【发布时间】：2014-11-0810:58:53【问题描述】：我有一个id="mydiv"的div，它在开始时没有分配给一个类。以下两个函数将类分配给mydiv。functionon... 查看详情
如何根据表单提交使用 jQuery 更改 CSS 样式？
...找不到正确的解决方案。我正在尝试使用红色单选按钮的JavaScript和jQuery，但包含所有HTML以作为良好的衡量 查看详情
如何在 React.js 中使用 JavaScript 修改 CSS
】如何在React.js中使用JavaScript修改CSS【英文标题】：HowtomodifyCSSusingJavaScriptinReact.js【发布时间】：2020-12-3112:32:42【问题描述】：如何在React上使用JavaScript更改css样式？例如，我会这样做：document.querySelector(\'.container\').style.backGroun... 查看详情
如何在本地存储 javascript 函数所做的 css 更改？
】如何在本地存储javascript函数所做的css更改？【英文标题】：Doesanyoneknowhowtostoreacsschangemadebyjavascriptfunctionlocally?有谁知道【发布时间】：2014-01-0213:21:19【问题描述】：我一直在摸不着头脑，我不知道如何在本地存储（HTML5本地存... 查看详情