Javascript 使用JS更改CSS值的最佳方法？

所以我正在为一个站点设计dropzone。当用户删除图像时，我希望预览元素上有一个方框阴影。如果它不是一个图像，我不希望框阴影。 css文件中预览元素的样式如下所示：

 .dropzone .dz-preview,
 .dropzone-previews .dz-preview {
  background: transparent;
  position: relative;
  display: inline-block;
  margin: 40px;
  vertical-align: top;
  border: 1px solid transparent;
  padding: 10px 13px 10px 10px;
}

在我的JS（内联）中，我已经有一个函数集，如果文件不是图像，它将发出特定的缩略图：

mydropzone.on("addedfile", function(file) {
  if (!file.type.match(/image.*/)) {
    mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png");
  }
});

我想我可以做一个else并设置框阴影，但是我不知道如何设置元素的样式，比如CSS中使用了几个类名的元素。我只想将此添加到CSS中：

-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
box-shadow: 1px 1px 4px rgba(0,0,0,0.16);

---

感谢

从元素中添加或删除一组CSS样式的最简单方法之一是为特定类名的样式创建CSS规则，然后将该类名添加/删除到特定元素中。如果要将样式添加到元素中，请将类名添加到元素中。如果要删除样式，请删除该类名。只需使用唯一的类名即可，这样添加/删除此类名不会产生意外后果

请记住，类名是单独处理的，因此可以在对象上已有N个其他类名，然后可以添加或删除一个特定的类名，链接到该类名的样式将更改，而其他类名不会更改

CSS规则：

.dropzoneHighlight {
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
}

Javascript:

if (condition met) {
    addClass(myElement, "dropzoneHighlight");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

---

二美分：如果你正在用dragndrop制作一些东西，你可能支持同样的浏览器来处理。也就是说，不要使用提供的

addClass

和

removeClass

函数，而是使用

element.classList.add

和

element.classList.remove

@SeanCoker-

classList

是一个不错的工具，但至少需要IE 10。我不一定要将支持拖放支持与只支持IE10或更高版本联系起来。似乎这两个决定是完全不同的。不关心IE，我怎么能用classlist来做呢？@neal-如果你不关心IE，你可以做

myElement.classlist.add（“dropzoneHighlight”）而不是
addClass（myElement，“dropzoneHighlight”）
，你可以做
myElement.classlist.add（“dropzoneHighlight”）
向元素添加类名。@jfriend00这就是为什么只需2美分。他似乎确实觉得这很有帮助；）