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

看起来您的代码根本不起作用。如果我理解了你的要求，这样的事情会起作用：

$.fn.extend({
    stealColor : function(target, opacity)
    {
        $(this).css('background-color', $(target).css('background-color') )
               .css('opacity', opacity );     

    } 
});

$('#output').stealColor('#button', 0.8);

或者如果你想窃取文字颜色：

$(this).css('background-color', $(target).css('color') )
    .css('opacity', opacity );     

见fiddle。

您的原始函数 hex2rgb 接受一个 rgb() 参数并产生一个 rgba() 值。

所以，修复你的代码：

function rgb2rgba(rgb, opacity) {
    return 'rgba' + rgb.substring(3, rgb.length-1) + ', ' + opacity + ')';
}
var getcolor = $("#button").css("color");
var colour = rgb2rgba(getcolor, 0.3);
$("#output").css("background-color", colour); 

见fiddle。

Answer 2

您可以使用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>