2014-05-12 21 views
8

Ho il seguente codice per ottenere il colore di sfondo di un elemento.Converti valore colore RGB in RGBA a 0,75 alfa

var currentColor = $(this).css('background-color'); 

che restituisce qualcosa come rgb(123,123,123)

Quello che ora voglio fare per convertire questo RGBA e mostrarlo a 0.75 alpha

Quindi tornando qualcosa di simile rgba(123,123,123,0.75)

Tutte le idee?

+0

hai considerato regex? – nicolallias

+0

Qualche motivo per cui vuoi cambiarlo in rgba invece di usare jQuerys $ .fadeTo-function? rgba non funzionerà con i browser più vecchi. Vorrei invece fare $ (this) .fadeTo (0, 0,75). – ninja

+0

@ninja Puoi inviare il tuo commento come risposta in modo da poterlo votare. È una soluzione migliore se stai già utilizzando jQuery. – Anton

risposta

17

Dal jQuery sembra sempre di restituire il colore come rgb(r, g, b) per gli elementi che non hanno alpha, si può semplicemente utilizzare:

$(this).css('background-color').replace(')', ', 0.75)').replace('rgb', 'rgba'); 

Basta assicurarsi che il colore di sfondo non è RGBA già:

var bg = $(this).css('background-color'); 
if(bg.indexOf('a') == -1){ 
    var result = bg.replace(')', ', 0.75)').replace('rgb', 'rgba'); 
} 
+0

attenzione, se 'questo' non ha set di colori di sfondo,' css ('background-color') 'restituirà' undefined'. –

+0

Ho aggiunto un test jsperf che mostra diff dell'uso di 'replace' vs' substr' per ottenere ciò. 'substr' è chiaramente il vincitore. https://jsperf.com/replace-rbg-with-rgba – ctrlplusb

2

http://regex101.com/r/lT9iM4

var re = /(rgb)\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/; 
var currentColor = $(this).css('background-color'); 
var subst = 'rgba($2,$3,$4,0.75'; 

$(this).css('background-color', currentColor.replace(re, subst)); 

Un'altra soluzione utilizzando regex. Ma come menzionato Cerbrus, usare espressioni regolari per qualcosa di semplice è eccessivo.

+0

'currentColor.replace (re, subst)' restituisce qualcosa come questo, per me: '" rgb (255, 255, 255) "' – Cerbrus

+0

Regola regex per accettare spazi in rgb –

+0

'currentColor.replace (re, subst)' -> '" rgba (rgb, 255,255,0.75) "'. I regexes sono semplicemente esagerati per qualcosa di così semplice come queste 2 sostituzioni. – Cerbrus

0

Un'altra espressione regolare cercano http://jsfiddle.net/hc3BA/

var colour = 'rgb(123,123,123)', 
new_col = colour.replace(/rgb/i, "rgba"); 
new_col = new_col.replace(/\)/i,',0.75)'); 
+0

regex sono overkill se tutto ciò che stai facendo è l'abbinamento di 1 stringa esatta. – Cerbrus

+2

Suggerimento, prova del concetto, sentiti libero di evolvere il codice. – nicolallias