2009-09-24 63 views
1

我怎樣才能從CSS類的背景圖像(網址)加載到JavaScript變量(最好使用jQuery)?jQuery的:從CSS類加載背景圖像到變量?

實施例:

.myCssClass { background-image: url(/images/checkered.gif) no-repeat; } 

...現在使用JavaScript加載checkered.gif成var CheckeredGraphic = ???

回答

3

你可以做到這一點的一種方法就是問問jQuery背景圖片是什麼。如果您沒有類myCssClass中的任何元素,可能只需生成一個元素,而不要將其添加到DOM。

var checkeredGraphic = $('<div class="myCssClass"></div>').css("backgroundImage"); 

我沒有測試過這一點,但如果它不工作,也許這與大的負邊距添加到人體那麼它不會在屏幕上呈現。

這線以上將返回url(/images/checkered.gif),那麼你可以只使用一個正則表達式來清理:

...css("backgroundImage").replace(/url\(['"]?([^\)'"]+)['"]?\)/, "$1") 

而且,你的CSS定義是錯誤的。它應該是:

background-image: url(...); 
background-repeat: no-repeat; 
+0

甚至:'background:url(...)no-repeat;'。無論如何,在你的正則表達式中,你爲什麼要匹配引號? – mauris 2009-09-24 23:57:55

+0

,因爲它可以使用'url('myfile.gif')'或'url(「myfile.gif」)',並且可以處理其中的每一個。沒有傷害更健壯一點? – nickf 2009-09-24 23:59:17