如何在JavaScript中编辑CSS样式？

Question

例如，我可以这样做：

document.getElementById('element').onclick = function() {
    document.getElementById('element').style.color = '#FFFFFF';
}

但我应该怎么做？

document.getElementById('element').onclick = function() {
    document.getElementById('element').style.-moz-box-shadow = '1px 1px 1px #000'; 

}

我希望你明白我的意思:)

请不要发布任何与jQuery或任何库相关的答案，我想用普通的javascript。

Answer 1

我相信它是：

myobject.MozBoxShadow = '1px 1px 1px #000';

由于最初的“ - ”字符，它不遵循样式对象的“典型”格式（这会使小写“M”）。在样式属性和这些样式的JS属性之间转换意味着：

1. 将第一个字符转换为小写
2. 将破折号后的所有字符转换为大写
3. 删除所有破折号

因此，“-moz-box-shadow”变为：

1. -moz-box-shadow（第一个字符是“ - ”，因此没有小写字母）
2. -moz-箱阴影
3. MozBoxShadow

Answer 2

我认为你将' - '改为大写字母，所以：

 document.getElementById('element').style.-moz-box-shadow = 1px 1px 1px #000;

应该是：

  document.getElementById('element').style.MozBoxShadow = "1px 1px 1px #000";