jQuery：如何从一个元素中获取内联样式（背景颜色）并将其添加到不同的元素？答案

【问题标题】：jQuery: How do I get an inline style (background-color) from one element and add it to a different element?jQuery：如何从一个元素中获取内联样式（背景颜色）并将其添加到不同的元素？
【发布时间】：2017-04-28 05:07:07
【问题描述】：

背景色被动态添加到元素中。我需要的是获取应用的内联样式并添加相同的 rgb 背景颜色，然后使用 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>

【问题讨论】：

标签： jquery background-color

【解决方案1】：

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

将 0.75 替换为您需要的任何 'a' 值。

【讨论】：

但是，因为您将相同的颜色放在上面，您实际上不会看到任何不同的东西。
这很完美，除了警告。 #story 的背景颜色也在动态加载。所以在这个 ^ 脚本加载之前没有颜色可以得到。这是首先加载，所以没有颜色可以抓取。在后台脚本加载后，我需要做什么才能强制加载此脚本。对于一些进一步的背景。设置背景的第一个脚本是一个自适应背景插件，它根据该容器中图像中的颜色加载颜色（在这种情况下，#story img 正在为#story 设置背景颜色）。
有很多方法可以做到这一点。一个想法。将此作为命名函数并在设置背景颜色的函数末尾调用它。或者，如果您不想进入插件代码，您可以向此函数添加设置超时，以便在触发前等待几秒钟。

【解决方案2】：

$("#story").css("background-color") can be used to get the color value.

您可以使用上面的代码来检索颜色并使用类似的东西来分配颜色：

var color = $("#story").css("background-color");
$("selector").css("background-color",color);

// This should assign the color to the h2 element
$("#story").find("h2").css("background-color",color);

【讨论】：