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

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