Javascript - 准确获取元素框阴影细节

Question

我有点不适应了..

几乎每个 css 属性都有单独的部分 IE。

margin-left
border-top-color
transition-duration

但是，我搜索了一下，在我看来，box-shadow 并非如此。 例如，我有 4 个<input>，H Spread & V Spread & Blur & Color。而且我不想在更改这些字段时更改元素框阴影。在发现没有关于盒子阴影的任何细节后，我决定最好的方法是将box-shadow 拆分为Array 使用类似的东西

element.style.boxShadow.split(' ');

但是结果没有按照Fiddle中所示的正确顺序返回

<div id="test" style="box-shadow: 1px 1px 3px #999;"> Welcome </div>
console.log( element.style.boxShadow.split(' ') );

导致此输出["rgb(153,", "153,", "153)", "1px", "1px", "3px"]

颜色不同，顺序也变了，这对我来说听起来不太可靠。

有没有办法我们可以准确地获取/设置 box-shadow 的不同部分

如果有解决方案，我也在使用 Zepto.js。

我试过.css(); = 同样的结果。

Answer 1

我希望这将帮助您实现目标。我做了一个正则表达式，它与浏览器输出的内容相匹配（rgb 只是作为 rgb 的十六进制）。它可能需要更新，因为我没有在所有浏览器中对其进行测试，但我认为它会将其转换为 rgb，因此如果有 alpha，则可以轻松处理。

这是小提琴：http://jsfiddle.net/HQ7NF/2/

这是我正在使用的正则表达式：

var reBoxShadow = /(?:rgb\((\d+), ?(\d+), ?(\d+)\)([^,]*))+/g;
while ( style = reBoxShadow.exex(element.style.boxShadow) ) {
    /* this is where stuff happens */
}

然后我将颜色和参数拆分为单独的变量，这样您就可以决定如何处理它们。我希望这至少能让你走上正轨。