CSSは別の要素に応じて色を設定します

Question

私のページにはいくつかのhtml要素があります。これらsectionsため

<section id="top-bar"> 
    <!-- html content --> 
</section> 

<section id="header"> 
    <!-- html content --> 
</section> 

<div id="left"> 
    <!-- html content --> 
</div> 

<section id="footer"> 
    <!-- html content --> 
</section> 

CSS background-colourとtext-colourはJoomlaの3.xのテンプレート設定で設定されている、これは私の「ブランドの色」です - 下の画像を参照してください。

私はテンプレートの設定でPreset 1を選択した場合、その後preset1.cssがウェブサイトのフロントエンドにロードされ、私はPreset 2を選択した場合、その後、preset2.cssは、ウェブサイトのフロントエンドにロードされているなど

私の問題は、ということですページ上に他のカスタム要素があります（上記コードの<div id="left">など）。これらの要素の背景色とテキストの色は、テンプレート設定では設定または制御されません。代わりに手動でcustom.cssファイルに設定する必要がありますが、これを変更する必要があります。custom.cssファイルは、ブランドカラー '。

基本的に、のカスタムエレメントは、テンプレート設定で指定したのと同じ 'ブランドの色'を使用したいと思います。いつもcustom.cssファイルを変更しなければならないのですか？

ので、<div id="left">background-colourとtext-colourは<section id="top-bar">background-colourとtext-colourと一致する必要があります。

JavaScriptをJavaScriptなどで動的に設定することはできますか？

おかげ

Answer 1

あなたは#top_bar要素の背景色を取得し、この場合には、あなたが望む他の要素に背景としてその兄弟をその色を追加するためのJSを使用することができます。テキストカラーと同じです。

var top_bar = $('#top-bar') 
 
var bg = top_bar.css('background-color') 
 
var color = top_bar.css('color') 
 

 
top_bar.siblings().css({ 
 
    backgroundColor: bg, 
 
    color: color 
 
})

section, div { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
#top-bar { 
 
    background: #22B8F0; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="top-bar"> 
 
    Text 
 
</section> 
 
<section id="header"> 
 
Text 
 
</section> 
 
<div id="left"> 
 
    Text 
 
</div> 
 
<section id="footer"> 
 
    Text 
 
</section>

Answer 2

.preset1は そして、唯一の事を#leftのように、このようPRESET1など、そのの子として各要素を選択すると、body要素のような親要素にクラスを追加します変更する必要があるクラスは1つであり、再同期の心配はありません。