jQuery, получающий текстовую тень variabile
Я хочу получить 4 переменные, когда я нажимаю на промежуток, которые имеют теневую текстом уместность CSS3. Таким образом для уместности 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)";
Я должен так или иначе разделить первую переменную для получения этих данных.
Спасибо
3 ответа
Для разделения следует использовать регулярное выражение результат 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 мог бы сделать это по-другому.
Очевидный путь:
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];
Поскольку я не думаю, что существует способ извлекать каждое значение из 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];