Question

我想在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;
    }

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

嗯，直到现在还没有工作。你能帮我看看如何在每个模板的div体上显示正确的图像吗？

非常感谢你。

Answer 1

首先，您的switch语法错误，并且您尝试将字符串与数字值（即。1与'1'）进行比较，但这并非如此使用strict equality时使用switch语句。

然后我建议你使用类而不是标识符来改变元素的样式。

最后，load元素上没有div事件，因此我在窗口上调用它以确保div已加载并准备好使用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在onload时切换图像

1 个答案: