javascript - Javascript 中的动态 CSS 图像 URL

Question

我有一个按钮可以有一个与之关联的焦点 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)，然后将其附加到头部或将其嵌入标记之前实例化 Button 本身。这个解决方案似乎并不理想。任何人都可以提出其他建议吗？

提前致谢。

Answer 1

如果您的案例具体涉及代表单个对象不同状态的图像(例如按钮的聚焦或非聚焦状态)，那么使用 sprites 是个好主意。 .那就是创建一个包含所有按钮状态的图像并加载它(如果需要，可以动态加载)。然后你可以在你的 CSS 中写一个通用规则:

btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/