javascript - CSS Set Colour Depending on Another Element - Stack Overflow

admin管理员组

文章数量:1389750

I have a number of html elements on my page, for example;

<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>

The CSS background-colour and text-colour for these sections are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.

If I choose Preset 1 in the template settings then preset1.css is loaded in the website front end, if I select Preset 2 then preset2.css is loaded in the website front end etc.

My issue is that I have other custom elements on the page (e.g. <div id="left"> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a custom.css file, which works, however I have to change this custom.css file to every time I change my 'Brand Colour'.

Basically, I'd like my custom elements to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the custom.css file all the time.

So, <div id="left"> background-colour and text-colour should match <section id="top-bar"> background-colour and text-colour.

Is it possible to dynamically set the CSS using JavaScript or similar?

Thanks

I have a number of html elements on my page, for example;

<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>

The CSS background-colour and text-colour for these sections are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.

If I choose Preset 1 in the template settings then preset1.css is loaded in the website front end, if I select Preset 2 then preset2.css is loaded in the website front end etc.

My issue is that I have other custom elements on the page (e.g. <div id="left"> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a custom.css file, which works, however I have to change this custom.css file to every time I change my 'Brand Colour'.

Basically, I'd like my custom elements to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the custom.css file all the time.

So, <div id="left"> background-colour and text-colour should match <section id="top-bar"> background-colour and text-colour.

Is it possible to dynamically set the CSS using JavaScript or similar?

Thanks

• javascript
• jquery
• html
• css
• joomla3.0

Share Improve this question Follow edited Mar 1, 2017 at 14:36 jonboy asked Mar 1, 2017 at 14:33 jonboyjonboy 2,74788 gold badges4343 silver badges8383 bronze badges 1

• 1 give a try and if you failed, add the code here – Sagar V Commented Mar 1, 2017 at 14:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use js to get background-color of #top_bar element and add that color as background to other elements you want, in this case its siblings. Same is for text-color.

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./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>

Add a class to a parent element like the body element, such as preset1 etc, then select each element as children of that, like .preset1 #left Then the only thing you have to change is one class, and there is no worry of resynchronisation.

本文标签： javascriptCSS Set Colour Depending on Another ElementStack Overflow