javascript - 更改多个页面的 div 上的 css 背景图像？

Question

我有这个 CSS:

div[data-role="page"]{ 
min-height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
border: 0px;
background-image:url('../img/blue_background.jpg');}

这是我的职责:

注意: 在函数中初始化的变量上，val() 来自一个选择框，该选择框在更改时保存在 localStorage 中。

function saveParam(){
var result=$("#param_results option:selected").val();
var scan=$("#param_scan option:selected").val();
var scan_speed=$("#param_scan_speed option:selected").val();
var scan_bg=$("#param_scan_bg option:selected").val();
var font=$("#param_font option:selected").val();
var screen_bg=$("#param_screen_bg option:selected").val();
var waiting_time=$("#param_waiting_time option:selected").val();

window.localStorage.setItem("param_results", result);
window.localStorage.setItem("param_scan", scan);
window.localStorage.setItem("param_scan_speed", scan_speed);
window.localStorage.setItem("param_scan_bg", scan_bg);
window.localStorage.setItem("param_font", font);
window.localStorage.setItem("param_screen_bg", screen_bg);
window.localStorage.setItem("param_waiting_time", waiting_time);


//$('div[data-role="page"]').css("background-image", "url('../img/green.jpg')");

back();}

我有几个 html 页面，它们都有 div[data-role="page"] 所以它们都有相同的背景，等等......但是当 param_screen_bg 改变时，我想永久改变背景图像到另一个，但它不工作。最后的注释行只是我尝试更改背景但它仍然不起作用。

编辑: https://jsfiddle.net/42zbcbge/1/

在这个 jsfiddle 上是我想要的一个小例子。当你按下保存按钮时，我想更改 css 上的背景，因此也更改页面上的背景，但它没有改变

Answer 1

嘿，我没有完全理解您添加的代码。但是，我猜你正在使用选择框并在选项的值中传递图像 url。 所以在获取时，你应该只使用选择框的 id，比如:

var screen_bg=$("#param_screen_bg").val();

代替

var screen_bg=$("#param_screen_bg option:selected").val();

var bg_image_value = localStorage.getItem("param_screen_bg");

if(bg_image_value != null && bg_image_value != '') {
   $('div[data-role="page"]').css("background-image", 'url('+bg_image_value+')' ); 
}

可以尝试在 codepen 或 jsfiddle 中添加代码。