Javascript中的动态CSS图像URL

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

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

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

这会给我的基础上，按钮是否是2个不同的图像“集中”与否。

我现在的问题是，图像的URL在运行时动态加载，并且没有办法用静态CSS文件指定它们。

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

在此先感谢。

来源

2012-07-05 user1503514

样式，包括背景图片可以很容易地被JS改变。您只需将一个函数附加到更改background-image CSS属性的按钮的onFocus事件即可。 – Thor84no 2012-07-05 10:03:30

我没有像这样的onFocus事件。我所知道的是，当按钮有焦点时，它将包含一个焦点CSS类 – user1503514 2012-07-05 10:06:22

一个按钮有一个onFocus事件。你只需要给它添加一个函数就可以了，这可以取决于你需要支持哪些浏览器和/或你有哪些js库（例如jQuery使它非常简单），或者你可以使用'element'这样的东西。 addEventListener（'focus'，function（）{/ *改变图像在这里* /}，true）'（这btw不适用于旧版本的IE IIRC）。阅读http://www.quirksmode.org/js/events_advanced.html/ http://api.jquery.com/focus/ – Thor84no 2012-07-05 11:14:33

如果你的情况是专门关于代表单个对象的不同状态的图像（例如集中或不集中在一个按钮的状态），那么它的使用sprites一个好主意。这是创建一个单一的图像与所有按钮状态并加载它（动态如果你想）。然后你可以在你的CSS中写出一个通用规则：

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

来源

2012-07-05 10:06:28

这不仅仅是'国家'。我实际上需要不同的图像才能聚焦和聚焦。我可以创建2个按钮用于聚焦和无焦点，并且.focus类包括显示：内联和默认显示：无。但是这不适用于Maple浏览器的版本 - 即使它没有焦点类，它也会显示焦点图像。 – user1503514 2012-07-05 10:13:14

您可以将不同的图像合并为一个图像，并将其聚焦和未聚焦的按钮组合成一个图像并动态提供。看看我链接的文章... – 2012-07-05 10:15:25

这看起来很有前途.....我会调查这一点。非常感谢。 – user1503514 2012-07-05 10:18:56

你是说这不起作用，因为他们的CSS样式“内联”的重写你的？如果是这样那么做到这一点，而不是

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

来源

2012-07-05 10:02:59

不，我是说我不知道这些网址是什么，并且必须动态设置，然后在运行时（使用Javascript） – user1503514 2012-07-05 10:05:19

啊好吧，我的坏:)。 – 2012-07-05 10:06:26

Javascript中的动态CSS图像URL

回答

相关问题