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>

这些background-colour的CSS text-colour和sections在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或类似功能动态设置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

将一个类添加到父元素（如body1等），然后选择每个元素作为子元素，如.preset1 #left 那么你唯一需要改变的就是一个类，并且不用担心重新同步。