jQuery 获取文本阴影变量

Question

当我单击具有 CSS3 文本阴影属性的跨度时，我想获得 4 个变量。所以对于 text-shadow: -4px 11px 8px rgb(30, 43, 2); 的 css 属性，我的代码应该是:

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

是否可以像这样拆分:

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

我需要以某种方式拆分第一个变量以获取此数据。

谢谢

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 可能会有所不同。