Wie Bild bei Onload wechseln

Question

Ich möchte das Bild (von CSS ID) innerhalb div (in HTML) zeigen. Das Bild muss mit der Vorlage übereinstimmen. Jeder Benutzer hat eine andere Vorlage, daher benötigen sie ein anderes Bild, das in der Körperansicht angezeigt wird.

Bisher, das ist mein Versuch:

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; 
    } 

JS

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

Nun, es funktioniert bis jetzt nicht. Würdest du mir bitte helfen, das richtige Bild am Div-Body für jede Vorlage zu zeigen?

Vielen Dank.

Answer 1

Also, zunächst einmal Ihre switch Syntax falsch ist, und Sie versuchen, String mit Zahlenwert zu vergleichen (dh. 1 mit '1'), die nicht mit switch-Anweisung funktioniert, wie es strict equality verwendet.

Dann schlage ich vor, dass Sie Klassen anstelle von Bezeichnern verwenden, um den Stil eines Elements zu ändern.

Schließlich ist das Ereignis load nicht auf div Elemente verfügbar, also habe ich es im Fenster aufgerufen, um sicher zu sein, dass das Div geladen und bereit ist, verwendet zu werden.

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>