javascript - 将两个 CSS 类的属性与过滤器属性结合起来

Question

为了总结我们必须为这个“联合类”做的过滤器属性的效果。

.class1{filter:brightness(125%);}
.class2{filter:blur(5px);}
.unionClass{filter:brightness(125%) blur(5px);}

但是如果代码这样写呢？

//i want this
<p class="class1 class2">Hello</p>
//instead of
<p class="unionClass">Hello</p>

在第一个示例中，结果我们只会应用 class2 类，因此 filter class1 类属性将丢失；而在第二个中，“unionClass”类将显示所有联合属性，因为它们已经包含在其中。 我想通过写 'class = "class1 class2' ' 看到同样的效果，我该怎么做？css 没有正确的方法吗？那么对于 javascript 什么是正确的方法？

Answer 1

这是使用 CSS 无法做到的。

当这样拆分时，后者将覆盖前者，就像其他任何属性一样。

从维护和易于阅读的 Angular 来看，做这样的事情可能很有趣

.fil-bright-125 {
  filter:brightness(125%);
}

.fil-blur-5 {
  filter:blur(5px);
}

.fil-bright-125.fil-blur-5 {
  filter:brightness(125%) blur(5px);
}

然后像这样使用它

p {
  color: blue;
  background: yellow;
}

.fil-bright-175 {
  filter:brightness(175%);
}

.fil-blur-1 {
  filter:blur(1px);
}

.fil-bright-175.fil-blur-1 {
  filter:brightness(175%) blur(1px);
}

<p class="fil-bright-175">I am bright</p>

<p class="fil-blur-1">I am blurry</p>

<p class="fil-bright-175 fil-blur-1">I am bright and blurry</p>

---

已更新

为了完整起见，这里是一个使用脚本的版本，它在样式表中查找类，然后创建一个新的类，在其中组合它们。

与上面的相比，我没有发现下面的更易于维护，实际上几乎相反。

请注意，此脚本当然可以优化，但目的是展示如何使用脚本完成此操作的示例

(function(d, w) {
  w.addEventListener("load", function() {

    function getStyle(cls) {
      var classes = d.styleSheets[0].rules || d.styleSheets[0].cssRules;
      var val = '';
      for (var x = 0; x < classes.length; x++) {
        for (var y = 0; y < cls.length; y++) {
          if (classes[x].selectorText == cls[y]) {
            val += ' ' + ((classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText).split('filter')[1].replace(/[:;} ]/g, '');
          }
        }
      }
      return val;
    }
    var val = getStyle(['.fil-bright-175','.fil-blur-1']);
    val = '.fil-bright-175.fil-blur-1 {filter:' + val + '}';

    var head = d.head || d.getElementsByTagName('head')[0],
        style = d.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
      style.styleSheet.cssText = val;
    } else {
      style.appendChild(d.createTextNode(val));
    }
    head.appendChild(style);

  }, false);
}(document, window));

p {
  color: blue;
  background: yellow;
}
.fil-bright-175 {
  filter: brightness(175%);
}
.fil-blur-1 {
  filter: blur(1px);
}

<p class="fil-bright-175">I am bright</p>

<p class="fil-blur-1">I am blurry</p>

<p class="fil-bright-175 fil-blur-1">I am bright and blurry</p>