Question

所以我正在为一个网站设计一个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");
  }
});

我以为我可以做一个其他的并设置框阴影，但我不知道如何为我的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, "");
}

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

1 个答案: