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>

这些 sections 的 CSS background-colour 和 text-colour 是在 Joomla 3.x 模板设置中设置的，这是我的 'Brand Colour' - 见下图。

如果我在模板设置中选择Preset 1然后preset1.css被加载到网站前端，如果我selectPreset 2然后preset2.css是加载在网站前端等

我的问题是页面上还有其他 自定义元素 （例如上面代码中的 <div id="left">）。这些元素的背景颜色和文本颜色不是通过模板设置设置或控制的，而是我必须在 custom.css 文件中手动设置它们，这有效，但是我必须更改此 custom.css每次我更改我的 'Brand Colour'.

文件

基本上，我希望我的 自定义元素 与我在模板配置中指定的 'Brand Colours' 相同。无需我一直更改 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

将 class 添加到父元素，例如 body 元素，例如 preset1 等，然后 select 每个元素作为该元素的子元素，例如 .preset1 #left 那么你只需要改变一个class，就不用担心重新同步了

CSS 根据另一个元素设置颜色

CSS Set Colour Depending on Another Element

javascript

jquery

html

css

joomla3.0