0

我有一个按钮，它可以有一个与之关联的焦点 css 类，我在运行时在 Javascript 中实例化它。
这都是由定制的 Javascript 框架提供的，因此无法更改。

通常我会为这个按钮提供 2 个额外的 CSS 类，例如

btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}

这将根据按钮是否“聚焦”给我 2 个不同的图像。

我现在遇到的问题是图像 url 是在运行时动态加载的，并且无法使用静态 CSS 文件指定它们。

我在想一种可能的解决方案是“以某种方式”生成一个新的样式元素，其中包含 btn 和 btn.focus 类（带有动态 URL），并将其附加到头部或在实例化之前将其嵌入到标记中按钮本身。这种解决方案似乎并不理想。任何人都可以提出其他建议吗？

提前致谢。

4

2 回答 2

0

您是说这不起作用，因为他们的 css 样式“内联”样式覆盖了您的样式？如果是这样，那么改为这样做

btn { background-image: url(/btn.png) !important;}
btn.focus { background-image: url(/btn-focus.png) !important;}
于 2012-07-05T10:02:59.510 回答
0

如果您的案例专门针对表示单个对象的不同状态的图像（例如按钮的聚焦或非聚焦状态），那么使用sprites是一个好主意。那就是创建一个包含所有按钮状态的图像并加载它（如果需要，可以动态加载）。然后你可以在你的 CSS 中编写一个通用规则：

btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/
于 2012-07-05T10:06:28.443 回答