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可能会采用不同的方式。

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

jQuery获取文本阴影变量

3 个答案: