2016-08-15 54 views
0

我正在寻找改变的应用程序非常简单HTMLwise - 只是一堆DIV。所有沉重的格式化工作都在样式表中完成。我遇到的挑战是在运行时更改背景图像。事情是这样:在运行时通过JavaScript加载div背景图像(通过/ with?CSS)

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

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

不工作,因为(我认为)通过CSS值HTML值将始终被 “覆盖”。而且(如果我是正确的),你得到任何对象模型:

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

是在这个网站俱备只...

我见过的其他项目和其他地方似乎不准确适用:更改按钮图像。使用Angular。加载精灵。不涉及CSS。图像交换传送带(涉及JQuery)。

我不会因为我认为/探索过的其他hacky workwrounds而感到厌倦,因为我觉得必须有一种方法可以用javascript和CSS来做到这一点,对吧?

我的问题是你如何使用JavaScript来更改样式表中的图像或更改样式表所覆盖的html div?

+0

也许你必须等待样式表加载和应用?尝试将代码放入'window.onload = function(){}' – yuriy636

+0

“所有繁重的格式化工作都在样式表中完成。”那么只需更改类名 –

+0

我已确认窗口已加载。任何方式,我真的不认为我有有效的语法编辑由CSS管理的背景图像。我知道的唯一方法是内联HTML定义和DOM集合语句。这两者(再次我认为)都被样式表所取代。 – liveFor10

回答

0

改变其style.backgroundImage是可能的: http://codepen.io/anon/pen/KrJEZO

点击“点击更改”看到这效果。 (影像链接的Sample Image前几个谷歌搜索结果)

如果你的代码不工作,我猜@ liveFor10是在正确的意见 - 也许调用change()功能的竞争条件是CSS之前运行被加载。

+0

上面的代码行: document.getElementById(id).style.backgroundImage ='1.png'; 当我可以打破显示.backgroundImage =“”行前后执行。也许是因为它不是来自document.defaultView.getComputedStyle ... – liveFor10

+0

@ liveFor10它会帮助在行后面加上'console.trace()'来看看它是如何被触发的?现在我们知道问题不在于JS没有运行,我想我们很接近;) –

0

您可以通过追加文本节点或修改内部html来为css文档添加规则。

var rule = document.createTextNode('.myimg { background: url(1.png) }'); 
[...document.querySelector('style')].pop().appendChild(rule); 

现在您可以参考添加的规则。

var el = document.getElementById('blah'); 
el.className += ' myimg'; // references a dynamically created css rule 
+0

谢谢@Daniel_L。这仍然不会让我动态地为CSS中的图像分配新的值。喜欢行动或悬停。我想我通过显示什么不工作,然后向完全不同的东西寻求方向,来混淆线程。我的意思是即使一个完美的功能DOM分配不影响CSS。 – liveFor10

+0

你可以简单地创建一个'style'标签并在你的css字符串后附加一个文本节点 –

+0

编辑你的问题标题和答案......基本上你可以创建css规则并将它们追加到样式标签,甚至解析页面上的css规则如果你想 –