根据另一个元素设置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背景颜色和文本颜色在Joomla 3.x模板设置中设置，这是我的‘品牌颜色’-请参见下面的图片。”

如果在模板设置中选择了“Preset 1”，则将在网站前端加载“preset1.css”，如果选择了“Preset 2”，则将在网站前端加载“preset2.css”等。我的问题是，我在页面上有其他自定义元素（例如上面的代码中的

）。这些元素的背景颜色和文本颜色不是通过模板设置设置或控制的，而是必须手动在“custom.css”文件中设置，这是有效的，但每次更改“Brand Colour”时都必须更改此“custom.css”文件。基本上，我希望我的自定义元素采用我在模板配置中指定的相同“品牌颜色”，而无需我一直更改“custom.css”文件。

所以，<div id="left">的background-color和text-color应该与<section id="top-bar">的background-color和text-color匹配。

是否可以使用JavaScript或类似的方式动态设置CSS？

谢谢

- jonboy

---

试一试，如果失败了，在这里添加代码。 - Sagar V

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>

- Nenad Vracar

Answer 2

将一个类添加到父元素，比如body元素，例如preset1等，然后选择每个元素作为其子元素，比如.preset1 #left 然后你只需要改变一个类，就不用担心重新同步的问题了。

- Chris Cook