jQuery获取text-shadow变量

当我点击具有CSS3文本阴影适当性的跨度时，我想得到4个变量。 所以对于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)"; 

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

感谢名单

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

明显的方式是：

 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

由于我认为没有办法从CSS中单独提取每个值，最简单的方法是进行一些字符串操作。 并且由于返回的值按以下顺序排列：color，y，x，blur，您最终会得到以下脚本：

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