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

Question

试图得到一个最近的问题的答案，我试图解析一个元素的盒子阴影，它被设置为

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

我希望得到那个字符串，在它上面做一个 split(",") ，然后得到一个盒子阴影数组。（有 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"

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

有没有更简单的方法来获取各个 box-shadows 的值？

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