在运行时使用javascript加载div背景图像（通过/ with？CSS）

Question

我想改变的应用程序是非常简单的HTMLwise - 只是一堆DIV。所有繁重的格式化工作都在样式表中完成。我遇到的挑战是在运行时更改背景图像。比如：

document.getElementById(id).style.setProperty('background-image', '1.png');

或

document.getElementById(id).style.backgroundImage = '1.png';

不起作用，因为（我认为）CSS值将始终被“覆盖”。并且（如果我是正确的）你得到的任何对象模型：

var ms = document.defaultView.getComputedStyle(document.getElementById(id), null);

只准备就绪......

我在这个网站和其他地方看到的其他项目似乎并不完全适用：更改按钮图像。使用Angular。加载精灵。没有参与的CSS。图像交换轮播（涉及JQuery）。

我不会厌倦我考虑/探索过的其他hacky workwrounds，因为我觉得必须有一种方法可以用javascript和CSS做到这一点，对吗？

我的问题是你如何使用javascript更改样式表中的图像或更改样式表所涵盖的html div？

Answer 1

可以更改其style.backgroundImage： http://codepen.io/anon/pen/KrJEZO

点击“点击更改”以查看此效果。 （图片链接是Sample Image）

的前几个Google结果

如果你的代码不起作用，我猜@ liveFor10在评论中是正确的 - 也许在加载css之前运行调用change()函数的竞争条件。