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

Question

因此，我正在为一个网站设计一个拖放区。当用户放下图像时，我希望预览元素上有一个框阴影。如果它不是图像，我不想要框阴影。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");
  }
});

我在想我可以做其他事情并设置框阴影，但我不知道如何为我的 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);

谢谢

Answer 1

从元素中添加或删除一组 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, "");
}