Question

我有点失意了..

足够接近每个css属性都有单独的IE部分。

margin-left
border-top-color
transition-duration

然而，我已经搜索了一下，似乎对我来说box-shadow并非如此。例如，我有4 <input>个，H Spread ＆amp; V Spread ＆amp; Blur ＆amp; 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 */
}

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

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

1 个答案: