更改多個頁面上的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背景圖像？

回答

相關問題