Je peux forcer jQuery.CSS ("backgroundColor") retourne au format hexadécimal?
j'ai un élément comme celui-ci:
<p>My text with a <strong class="highlighted">sample highlight</strong>.<p>
et la classe CSS comme ceci:
.highlighted {
background: #f0ff05;
font-weight: normal;
}
mais quand j'utilise un jQuery comme celui-ci:
$(".highlighted").css("backgroundColor");
Il retourne rgb(240, 255, 5) . Je pourrais écrire une certaine fonction pour convertir de rgb à hex , mais je voudrais savoir s'il y a un moyen de jQuery retourner la valeur déjà sur le format hexadécimal .
2 réponses
les couleurs sont toujours retournées comme rgb (sauf IE6 qui retourne déjà dans hex ), alors nous ne pouvons pas retourner dans un autre format nativement.
comme vous l'avez dit, Vous pouvez écrire une fonction à convertissez hex en rgb . Voici un sujet avec plusieurs exemples de la façon d'écrire cette fonction: comment obtenir la valeur de couleur hex plutôt que la valeur RVB? .
mais vous vous demandez s'il y a un moyen de retourner directement le jQuery déjà dans hex: la réponse est oui , c'est possible en utilisant CSS Hooks depuis jQuery 1.4.3.
le code doit être:
$.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]);
}
}
}
et quand vous appelez $(".highlighted").css("backgroundColor") , le retour sera #f0ff05 . Voici un échantillon de travail à vous de voir leur fonctionnement.
voici une version légèrement modifiée de la réponse d'Erick Petrucelli. Il semble s'occuper de 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]);
}
}
}
};