javascript - 设置为多个值时获取单个框阴影的值

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"

当然，当我 split 时，我会变得一团糟。

是否有一种更简单的方法来获取各个框阴影的值？

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