CSS根據另一個元素設置顏色

Question

例如，我的頁面上有許多html元素;

<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這些sections中的Joomla 3.x的模板設置選項，這是我的「品牌顏色」 - 見下面的圖片。

如果我選擇在模板設置，然後preset1.css在網站前端加載Preset 1，如果我選擇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或類似動態設置CSS？

感謝

Answer 1

您可以用js獲得#top_bar元素的背景顏色，並添加顏色作爲背景，你想其他的元素，在這種情況下，它的兄弟姐妹。同樣是文字顏色。

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等，然後選擇每個元素的孩子，像.preset1 #left 那麼唯一的你不得不改變是一個階級，並且不用擔心再同步。