javascript - 如何通过javascript设置盒子阴影？

Question

我知道您可以执行以下操作：

element.style.box-shadow ="something";

我将如何涵盖 -moz 和 -webkit 扩展？

如果我做了element.style.-webkit-box-shadow="something"and element.style.-moz-box-shadow="something"，我会被覆盖吗？

Answer 1

该选项被称为webkitBoxShadow,mozBoxShadow等 - 将 CSS 选项名称转换为.style.属性删除前导短划线，然后将其转换lowercase-with-dashes为lowerCamelCase.

Answer 2

最好设置一个类，为各种浏览器声明这些阴影属性，并将该类附加到className目标元素的 。

就像是：

.shadowed{
    /*all shadow declarations for various browsers*/ 
    -o-
    -webkit-
    -moz-
    -ms-
    box-shadow
}

element.className += ' shadowed';

Answer 3

element.style['-webkit-box-shadow'] = "something";

或者在 Mozilla 中：

element.style['-moz-box-shadow'] = "something";