jQuery getting text-shadow variabile

Question

Ich möchte 4 Variablen erhalten, wenn ich auf einen Bereich klicke, der die CSS3 Text-Schatten-Anständigkeit hat. Also für eine CSS-Schicklichkeit text-shadow: -4px 11px 8px rgb(30, 43, 2); sollte meinen Code sein:

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

es möglich wäre, um es wie gespalten zu erhalten:

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

muss ich geteilt irgendwie die erste Variable, diese Daten zu erhalten.

Thanx

Answer 1

Sie reguläre Ausdrücke verwenden, sollten das Ergebnis von jQuery CSS in die Variablen teilen Sie sind auf der Suche nach.

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]; 

Dies wird ein Array zurück die text-shadow String-Wert in Zahlen mit Pixeln und RGB-Werte aufzuteilen. Es kann Ihnen in diesem Fall helfen, aber Sie werden wahrscheinlich auf ihm etwas mehr arbeiten müssen, um es für alle möglichen Fälle von text-shadow

Hinweis zu erhalten arbeiten: Der rgb(...) Wert ist das erste Spiel in der Anordnung Denn so geben Firefox, Chrome, Safari und Opera es zurück, unabhängig davon, wie Sie es zuweisen. IE könnte es anders machen.

Answer 2

Offensichtliche Weg wäre:

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]; 

Answer 3

Da glaube ich nicht, dass es einen Weg gibt, individuell jeden Wert aus der CSS zu extrahieren, ist der einfachste Weg, es zu tun wäre, Mach etwas Schnurmanipulation. Und da kehrte der Wert in dieser Reihenfolge ist: Farbe, y, x, Unschärfe, dann würden Sie mit diesem Skript am Ende:

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];