Question

总结过滤器属性的效果，我们必须做这个＆＃39; union类。＆＃39;

.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类，因此过滤器class1类属性将丢失;而在第二个'unionClass＆＃39; class将显示所有联合属性，因为它们已包含在其中。我希望通过编写＆＃39; class =＆＃34; class1 class2＆＃39;来看到相同的效果。＆＃39;，我该怎么办？ css没有正确的方法吗？那么使用javascript会是什么样的正确方法？

Answer 1

使用CSS无法做到。

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

从维护和易于阅读的角度来看，做这样的事情会很有趣

.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>

将两个CSS类的属性与filter属性组合在一起

1 个答案: