jQuery - 從元素獲取顏色並將其用於具有不透明度的另一個元素

Question

基本上我想從CSS元素（在我們的例子中爲#button）*獲取顏色，並將其用於另一個CSS元素（在我們的例子中爲#output） *但不透明。我想在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

，而不是試圖修改rgb，您可以使用opacity屬性如下圖所示：

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>

Answer 2

看起來不像你的代碼在所有工作。如果我理解你的要求，像這樣的工作：

$.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。