jQuery - 从一个元素获取颜色并将其用于另一个具有不透明度的元素

Question

基本上，我想从一个 CSS 元素(在我们的例子中是#button)* 获取颜色，并将它用于另一个 CSS 元素(在我们的例子中是#output)*，但带有 opacity 。我想要 rgba 的输出，所以我可以从 rgba 设置不透明度。我的解决方案似乎不起作用...

function hex2rgb(hex, opacity) {
   var h=hex.replace('#', '');
   h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

   for(var i=0; i<h.length; i++)
   h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

   if (typeof opacity != 'undefined')  h.push(opacity);

   return 'rgba('+h.join(',')+')';
}

var getcolor = $("#button").css("color");

var colour = hex2rgb(getcolor,0.3);

$(function() {
  $("#output").css("backgroundColor",colour); 
});

*参见 JSFiddle

Answer 1

您可以使用 opacity 属性，而不是尝试修改 rgb，如下所示:

function change(source, target, alpha) {
    var color = source.css("color");
    var sub = color.slice(0,-1).replace("rgb","rgba");
    color = sub+ ", "+alpha+")";
    target.css("background-color", color);
}

$(function () {
    change($("#button"),$("#output"), 0.5)
});

#output {
    border:1px solid black;
    width:400px;
    height:400px;
    background:#ff0; /* This needs to be replaced with #button color to rgba */
}

#button {
    color:#F54C54;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<br>
<div id="button">Get color from this text</div>