将两个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> 

在第一个例子作为一个结果，我们将仅适用于该等级2级，所以过滤器class1的类属性将被丢失;而在第二个'unionClass'类将显示所有的联合属性，因为它们已经包含在其中。 我想通过写'class = class1 class2''来看到相同的效果，我该怎么做呢？css没有正确的方法吗？所以用javascript什么才是正确的方式？

Answer 1

这就是不可能做使用CSS。

当splitt'd这样，后者将覆盖前者，因为它会与任何其他财产。

从维护和易于阅读透视它可能会有趣的做这样的事情

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