2つの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クラスのみが適用されるため、class1クラスのプロパティは失われます。 2番目のクラスでは、 '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>