如何在打开时切换图片

-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

如何在打开时切换图片

回答

相关问题