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

Javascript - getting element box-shadow details accurately

本文关键字：阴影 细节 元素 获取 Javascript-      更新时间：2023-09-26

我有点不知所措。。

几乎每个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();=同样的结果。

我希望这将帮助您实现目标。我制作了一个正则表达式，它与浏览器输出的内容相匹配（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 */
}

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

相关文章：