Posso forzare jQuery.css (“backgroundColor”) restituisce in formato esadecimale?

Ho un elemento come questo:

My text with a sample highlight.

E la class CSS come questa:

 .highlighted { background: #f0ff05; font-weight: normal; } 

Ma quando uso un jQuery come questo:

 $(".highlighted").css("backgroundColor"); 

Restituisce rgb(240, 255, 5) . Potrei scrivere alcune funzioni per convertire da rgb in hex , ma vorrei sapere se c’è un modo per jQuery restituire il valore già in formato esadecimale .

I colors vengono sempre restituiti come rgb (tranne IE6 che già ritorna in hex ), quindi non possiamo tornare in un altro formato in modo nativo.

Come hai detto tu, puoi scrivere una funzione per convertire hex in rgb . Ecco un argomento con diversi esempi su come scrivere questa funzione: Come ottenere il valore del colore esadecimale anziché il valore RGB? .

Ma ti chiedi se c’è un modo per restituire direttamente il jQuery già in esadecimale: la risposta è sì , questo è ansible usando Hook CSS da jQuery 1.4.3.

Il codice dovrebbe essere:

 $.cssHooks.backgroundColor = { get: function(elem) { if (elem.currentStyle) var bg = elem.currentStyle["backgroundColor"]; else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color"); if (bg.search("rgb") == -1) return bg; else { bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); } } } 

E quando chiamate $(".highlighted").css("backgroundColor") , il ritorno sarà #f0ff05 . Ecco un esempio funzionante per vederlo funzionare.

Questa è una versione leggermente aggiustata della risposta di Erick Petrucelli. Sembra gestire RGBA.

  $.cssHooks.backgroundColor = { get: function (elem) { if (elem.currentStyle) var bg = elem.currentStyle["backgroundColor"]; else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color"); if (bg.search('rgba') > -1) { return '#00ffffff'; } else { if (bg.search('rgb') == -1) { return bg; } else { bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); } } } };