Hinzufügen von Alpha-Kanal zu Hintergrundfarbe mit jQuery/JavaScript

Question

Ich habe eine jQuery-Funktion, die einen Alpha-Kanal zu einer Hintergrundfarbe hinzufügt, wenn ein Ereignis auftritt.

Hier ist meine jsFiddle.

CSS

div { background-color: rgb(100,100,100); } 

JavaScript

function addAlphaChannel() { 
    var oldBGColor = $('div').css('backgroundColor'); //rgb(100,100,100) 
    var newBGColor = oldBGColor.replace('rgb', 'rgba').replace(')', ',.8)'); //rgba(100,100,100,.8) 

    $('div').css({ backgroundColor: newBGColor }); 
} 

Dieser Code funktioniert gut, aber ich frage mich, ob es eine bessere Art und Weise ist Alphakanal hinzufügen/verändern?

Jede Hilfe wird sehr geschätzt.

Answer 1

Wenn Sie die rgba CSS-Eigenschaft mit Hilfe von JavaScript ändern möchten, müssen Sie die ersetzen Methode verwenden, aber Sie Ihren Code wie folgt verbessern:

CSS

div { background-color: rgba(100, 100, 100, 1.0); } 

JS

function addAlphaChannel() { 
    var oldBGColor = $('div').css('background-color'), //rgb(100,100,100), 
     newBGColor = oldBGColor.replace(/[^,]+(?=\))/, '0.8'); //rgba(100,100,100,.8); 

    $('div').css({ backgroundColor: newBGColor }); 
} 

Hoffe, das kann Ihnen helfen.