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

回答

相關問題