我有一个按钮，可以有一个与之关联的焦点css类，我在Javascript中在运行时实例化它。
这都是由定制的Javascript框架提供的，因此无法更改。
通常我会为这个按钮提供2个额外的CSS类， e.g。
btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}
根据按钮是否“聚焦”，这将给我2个不同的图像。
我现在遇到的问题是图像网址是在运行时动态加载的，没有办法用静态CSS文件指定它们。
我认为一种可能的解决方案是'以某种方式'生成一个新的样式元素，其中包含btn和btn.focus类（使用动态URL）并将其附加到头部或将其嵌入到标记之前即时按钮本身。这种解决方案似乎并不理想。 任何人都可以提出别的建议吗？
提前致谢。
答案 0 :(得分：0)
你是说这不起作用，因为他们的css风格“内联”风格超越了你的风格？如果是这样，那就改为
btn { background-image: url(/btn.png) !important;}
btn.focus { background-image: url(/btn-focus.png) !important;}
答案 1 :(得分：0)
如果您的案例专门针对代表单个对象的不同状态的图像（例如按钮的聚焦状态或非聚焦状态），那么使用sprites是个好主意。 那就是创建一个包含所有按钮状态的单个图像并加载它（如果需要，可以动态加载）。 然后你可以在你的CSS中编写一个通用规则：
btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/