检查是否已应用框阴影

Question

在Javascript中是否有办法检查元素是否已经应用了盒子阴影？

我这样做是因为当可能已经存在外部阴影时，我正在添加内部（插入）框阴影。如果已经存在阴影，我需要在新的样式文本之前放置一个逗号。

var shadowStyle = "5px 5px #000000";

if (ele.hasBoxShadow())
{
   ele.style.boxShadow += ", "+shadowStyle;
   ele.style.WebkitBoxShadow += ", "+shadowStyle;
   ele.style.MozBoxShadow += ", "+shadowStyle;
   ele.style.OBoxShadow += ", "+shadowStyle;
   ele.style.MsBoxShadow += ", "+shadowStyle;
}
else ele.style.boxShadow = shadowStyle;
     ...

Answer 1

如果您想使用ele.hasBoxShadow()。

Element.prototype.hasBoxShadow = function() {
    return window
            .getComputedStyle(this)
            .getPropertyCSSValue('box-shadow')
            .cssText != 'none';
}

jsFiddle

如果属性设置为供应商前缀（至少在Firefox 8中），它也是works

但我不建议扩充Element的{​​{1}}。创建一个实用程序对象并将其添加为方法。