jQuery получает переменную text-shadow

Question

Я хочу получить 4 переменные, когда нажимаю на диапазон, который соответствует CSS3 text-shadow. Так что для правильности CSS text-shadow: -4px 11px 8px rgb(30, 43, 2); мой код должен быть:

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

Можно ли разделить его как:

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

Мне нужно как-то разделить первую переменную, чтобы получить эти данные.

Thanx

Answer 1

Вы должны использовать регулярное выражение, чтобы разделить результат 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 может сделать это по-другому.

Answer 2

Поскольку я не думаю, что есть способ извлечь каждое значение из CSS в отдельности, самый простой способ сделать это - выполнить некоторые манипуляции со строками. И так как возвращаемое значение имеет следующий порядок: цвет, у, х, размытие, вы получите этот скрипт:

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

Answer 3

Очевидный путь будет:

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