如何在打開時切換圖片

-1

我想在div（html）中顯示圖片（來自css id）。圖像必須與模板匹配。每個用戶都有不同的模板，因此他們需要在正文視圖中顯示不同的圖像。如何在打開時切換圖片

到目前爲止，這是我的嘗試：

HTML

<div id="logoHeader"></div>

CSS

#logoheader_1 { 
    height: 100px; 
    background: url("/logoheader_1.png") left 20px no-repeat; 
    } 
    #logoheader_2 { 
    height: 100px; 
    background: url("/logoheader_2.jpg") left 20px no-repeat; 
    }

var templates = 1; // This is just example of if user A using template 1 

switch(templates) { 
    case '1' 
    document.getElementById("logoHeader").onload = function() { 
     document.getElementById("logoheader_1"); 
    }; 
    break; 
    case '2' 
    document.getElementById("logoHeader").onload = function() { 
     document.getElementById("logoheader_2"); 
    }; 
    break; 
}

jsfiddle

嗯，直到現在它還沒有起作用。請你幫我如何在每個模板的div身上顯示正確的圖像？

非常感謝。

來源

2017-07-06 akpackage

難道你連看了看控制檯？ –

是的，它表示'未捕獲的SyntaxError：意外的標識符'被調用爲'document.getElementById（「logoHeader」）。onload = function（）'。我相信我的語法不對。遵循這個解決方案https://stackoverflow.com/questions/13486094/is-this-how-you-incorporate-an-onload-event仍然沒有工作 – akpackage

所以，首先，你switch語法是錯誤的，你嘗試比較字符串數值（即1與'1'），因爲它使用strict equality不與switch語句工作。

然後我建議你使用類而不是標識符來改變元素的風格。

最後，load事件在div元素上不可用，所以我在窗口中調用它以確保div已加載並可以使用。

window.addEventListener('load', function() { 
 
    var templates = 1; 
 

 
    switch (templates) { 
 
    case 1: 
 
     document.getElementById('logoHeader').classList.add('logoheader_1'); 
 
     break; 
 
    case 2: 
 
     document.getElementById('logoHeader').classList.add('logoheader_2'); 
 
     break; 
 
    } 
 
});

.logoheader_1 { 
 
    height: 100px; 
 
    background: red; 
 
} 
 

 
.logoheader_2 { 
 
    height: 100px; 
 
    background: black; 
 
}

<div id="logoHeader"></div>

來源

2017-07-06 14:12:03

OMG，非常感謝你！它現在工作。 – akpackage

如何在打開時切換圖片

回答

相關問題