Question

尝试获取最近question的答案，我试图解析已设置为

的元素的盒子阴影

div {
    box-shadow: 0 0 0 5px green, 0 0 0 10px #ff0000,  0 0 0 15px blue;    
}

我希望获得该字符串，对其进行拆分（“，”），然后获取盒阴影数组。（有3个元素）

我的问题是我得到了字符串

"rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px"

当然，当我分手时，我得到一团糟。

是否有更容易的方法来获取单个框阴影的值？

Answer 1

您可以尝试三个单独的声明

document.getElementById('the-element-id').style['boxShadow']

或者进行拆分但是使用“px”作为分隔符并将“px”添加回除最后一个之外的所有数组值

var string ="rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px";

var array= string.split("px, ");
var length = array.length;
for (var i=0; i<length; i++) {
    if (i != length - 1){
        array[i] = array[i] + "px";
    }
    console.log(array[i]);
}

jsFiddle

[编辑]

我刚刚意识到如果盒子阴影的最后一个值为0（即15px 0 0 0，rgb）

，这将不起作用

这是替代方案，在这种情况下拆分为“，rgb”并将“rgb”添加回除第一个数组之外的所有数组值：

var string ="rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px";

var array= string.split(", rgb");
for (var i=0; i<array.length; i++) {
    if (i != 0 ){
        array[i] = "rgb" + array[i];
    }
    console.log(array[i]);
}

jsFiddle

设置为多个值时获取单个box-shadow的值

1 个答案: