將兩個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>