更改多个页面上的div的CSS背景图像？

我有这样的CSS：更改多个页面上的div的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 [数据角色=“页面”]所以他们都具有相同的背景，等等。但是当param_screen_bg改变，我想永久地将背景图像更改为另一个，但它不起作用。最后的评论栏只是试图改变背景，但它仍然不起作用。

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

这个的jsfiddle是我想要的一个小例子。当你按下保存按钮，我想改变的CSS背景，为此在页面上太多，但它不改变

来源

2016-06-29 Tiago Pina

;

jQuery().ready(function() //do when page is loaded { if(window.localStorage.getItem("param_screen_bg") !== null) //check if value is set in localStorage { //get value from localStorage and apply it to the div: $('div[data-role="page"]').css("background-image", window.localStorage.getItem("param_screen_bg")); } });

我做这个样本虽然在一些假设，但我认为你可以处理它：所以，你可以，例如，做这样的事情“你是说这张照片将来会用到吗？ –

每次“param_screen_bg”被改变时，背景也被改变。所以通过永久性的我的意思是，直到应用程序上的某个人改变它，背景将成为新图像 –

嘿，我没有完全理解你所添加的代码。但是，我猜你正在使用选择框并在选项的值中传递图像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代码。

来源

2016-06-29 15:12:18

是的，就是这样。但要获得选择的选项不需要选项：选择？但是，在那之后，我如何永久地改变CSS上的背景图像？ –

没有也没有必要使用选项：选择摆脱选择框VAR bg_image_value = localStorage.getItem（“param_screen_bg”）值;如果（bg_image_value = NULL && bg_image_value = '！'）{$（ 'DIV [数据角色= “页面”]'），CSS（ “背景图片”，网址（bg_image_value））。 }} –

THX的帮助，但我能得到的VaR值，但事情是当我申请的DIV的CSS改变它不会改变的背景下，只得到一个白色背景 –

您在localStorage的是setting值，但你似乎永远get“M。用'永久改变）

来源

2016-06-29 17:51:17 BillyNate

thx的答复，我有一个方法上面的代码我发布的获取项目，但事情是当我应用css更改为div，背景不更改为新图像，而不是它，更改为白色背景：s –

检查您正在设置的值并获取localStorage以及您为CSS设置的值。这是正确的CSS？您可以使用浏览器检查器查看设置的内容。 – BillyNate

更改多个页面上的div的CSS背景图像？

回答

相关问题