Search code examples
jquerybackground-color

jQuery: How do I get an inline style (background-color) from one element and add it to a different element?

The background-color is being added to the element dynamically. What I need is to grab the inline style that's applied and add that same rgb background-color and add it to another element with rgba.

<section id="story" style="background-color: rgb(122, 86, 126)">
 <div class="row main text-center medium-text-left">
  <div class="small-12 medium-6 large-5 columns photo">
    <img src="assets/imgs/home/girl-closeup.jpg" alt="Close up of Natalia's face" data-adaptive-background>
    <h2 [Need background-color, but rgba applied here]>Natalia Summers - Age: 9<br>Fight: Lymphoma</h2>
 </div>
 <div class="small-12 medium-6 large-7 columns story">
    <h3>Natalia's Story</h3>
    <p>...</p>
</div>

Solution 
  • $(document).on('ready', function(){
var color = $("#story").css("background-color");
color = color.replace(')', ', 0.75)').replace('rgb', 'rgba');
$("#story h2").css("background-color",color);})

    replace the 0.75 with whatever 'a' value you need.