2010-04-21 73 views
6

當我點擊一個具有CSS3文字陰影屬性的跨度時,我想得到4個變量。所以對於text-shadow: -4px 11px 8px rgb(30, 43, 2);一個css禮,我的代碼應該是:jQuery獲取文字 - 陰影變異

$("#element").click(function() { 
var text-shadow = $("#element").css("text-shadow") 
}); 

是否有可能得到它拆分,如:

var y = "-4px"; 
var x = "11px"; 
var blur = "8px"; 
color = "rgb(30, 43, 2)"; 

我需要以某種方式分拆第一變量獲得這些數據。

感謝名單

+0

Thanx it works! – Mircea 2010-04-21 13:48:53

回答

9

您應該使用正則表達式的jQuery CSS的結果分成了你的變量正在找。

var result = $('#element').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g) 
// result => ['rgb(30, 43, 2)', '-4px', '11px', '8px'] 
var color = result[0], 
    y = result[1], 
    x = result[2], 
    blur = result[3]; 

這將返回一個數組分割text-shadow字符串值成數字像素和RGB值。它可以幫助你在這種特殊情況下,但你可能會需要一些關於它的更多的工作,得到它的工作text-shadow

注意所有可能的情況:rgb(...)值是數組中的第一場比賽因爲,這就是Firefox,Chrome,Safari和Opera返回它的方式,與分配方式無關。 IE可能會有所不同。

+0

謝謝,這也工作! – Mircea 2010-04-21 13:49:09

+0

這是一款非常不錯的跨瀏覽器解決方案,適用於Firefox,Chrome和Safari,沒有機會在IE中測試,謝謝! – alchemication 2012-09-01 14:17:57

1

明顯的方法是:

var properties = $('#element').css('text-shadow').split(" "); 

var y = properties[0]; 
var x = properties[1]; 
var blur = properties[3]; 
var color = properties[4] + " " + properties[5] + " " + properties[6]; 
+0

該物業訂單是倒退 – Mottie 2010-04-21 13:40:14

+0

它的工作!謝謝 – Mircea 2010-04-21 13:49:29

1

因爲我不認爲有一種方法可以提取出從單獨的CSS每個值,最簡單的方式做這將是做一些字符串操作。而且,由於返回值是按以下順序:顏色,Y,X,模糊,你想最終這個腳本:

var p = $('#element').css('text-shadow').split(' '); 
var color = p[0]+p[1]+p[2]; 
var y = p[3]; 
var x = p[4]; 
var blur = p[5]; 
+0

所有給出的解決方案的工作。這也工作。謝謝 – Mircea 2010-04-21 13:50:00

+0

這不是一個跨瀏覽器的解決方案,在Firefox中工作,雖然 – alchemication 2012-09-01 14:17:02