hexadecimal - jquery hex to rgb

¿Puedo forzar jQuery.css("backgroundColor") devuelve en formato hexadecimal?

Question

Tengo un elemento como este:

<p>My text with a <strong class="highlighted">sample highlight</strong>.<p>

Y la clase CSS como esta:

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

Pero cuando uso un jQuery como este:

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

Devuelve rgb(240, 255, 5) . Podría escribir alguna función para convertir de rgb a hexadecimal , pero me gustaría saber si hay alguna forma de que jQuery devuelva el valor que ya está en formato hexadecimal .

Answer 1

Esta es una versión ligeramente ajustada de la respuesta de Erick Petrucelli. Parece manejar 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]);
}
}
}
};

Answer 2

Los colores siempre se devuelven como rgb (excepto IE6, que ya regresa en hexadecimal ), luego no podemos volver en otro formato de forma nativa.

Como dijiste, puedes escribir una función para convertir hex a rgb . Aquí hay un tema con varios ejemplos de cómo escribir esta función: ¿Cómo obtener el valor del color hexadecimal en lugar del valor RGB? .

Pero te preguntas si hay una manera de devolver directamente el jQuery en hexadecimal: la respuesta es sí , esto es posible usando CSS Hooks desde jQuery 1.4.3.

El código debería ser:

$.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]);
}
}
}

Y cuando llame a $(".highlighted").css("backgroundColor") , el resultado será #f0ff05 . Aquí hay una muestra de trabajo para que lo veas funcionar.