Puis-je la force de jQuery.css(“backgroundColor”) renvoie sur format hexadécimal?

J'ai un élément comme ceci:

<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 jQuery comme ceci:

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

Il retourne rgb(240, 255, 5). Je pourrais écrire une fonction pour convertir rvb à hex, mais je voudrais savoir si il est possible de jQuery retourner la valeur déjà sur format hexadécimal.

Nope. Il n'existe pas de méthode jquery ou bien pour cela. Commencez à écrire votre propre code. Regardez ici, stackoverflow.com/questions/1740700/...
Pourquoi avez-vous besoin en hexadécimal? N'est-ce pas rgb plus facile à analyser?
Je vais envoyer la valeur hexadécimale à l'aide d'AJAX et le code côté serveur (que je ne peux pas changer) attend sur hex.

InformationsquelleAutor | 2011-05-30

72

Couleurs sont toujours retournés comme rvb (sauf IE6 qui retourne déjà dans hex), alors nous ne pouvons pas retourner dans un autre format natif.

Comme vous l'avez dit, vous pouvez écrire une fonction pour convertir hex rvb. Voici un sujet avec plusieurs exemples de la façon d'écrire cette fonction: Comment obtenir une couleur hexadécimale de la valeur plutôt que de la valeur RVB?.

Mais vous vous demandez si il y a un moyen pour retourner directement à jQuery déjà dans l'hex: la réponse est oui, c'est possible en utilisant CSS Crochets depuis jQuery 1.4.3.

Le code devrait ê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 lorsque vous appelez $(".highlighted").css("backgroundColor"), le retour sera #f0ff05. Voici une échantillon de travail à vous de voir leur fonctionnement.
- Mais votre code seulement le get. Je vais peut utiliser $(".highlight").css("backgroundColor", "#ff0000") encore?
- Comme nous n'avons pas primordial que le setter, il vous reste à travailler sans modifications. Mon échantillon de travail est un exemple de l'ensemble.
- Cool, je n'ai pas vu cela dans l'exemple. Merci!
- merci, cela fonctionne fantastique!
- Je ne suis pas sûr si c'est juste la machine que je suis en train de tester, mais IE8 est en train de lancer une exception d'essayer d'utiliser cette cale. Elle lève une erreur undefined pour bg sur la ligne if (bg.search("rgb") == -1), ce qui signifie que bg n'est pas définie à partir de la première instruction if else. Il convient de noter que je ne suis que rencontre ce sur une version actuelle de IE8 et pas dans IE9 en utilisant les outils de dev pour simuler IE8.
- Je n'ai pas de machine avec IE8, maintenant le tester. Mais peut-être que IE8 n'ai pas currentStyle ni getComputedStyle, donc nous avons besoin pour créer encore une autre pour récupérer le background-color d'une autre manière. Je ne suis pas sûr de quelle manière, mais si vous le trouvez, s'il vous plaît poster ici et je vais mettre à jour la réponse.
- Pour faire de cette compatibile avec IE8 changement var bg = elem.currentStyle["background-color"]; à var bg = elem.currentStyle["backgroundColor"];
- Merci @dloewen, j'ai mis à jour le code avec votre suggestion. Je ne suis pas sur IE8 pour le tester, mais si il y a plus de problèmes, laissez-moi savoir.
- Très cool! J'ai essayé de l'utiliser et je ne pouvais pas le faire fonctionner... Navigateur renvoie rgbA. Une petite astuce est nécessaire pour qu'il fonctionne correctement.
- Merci de vos commentaires et suggestions @Salketer, pouvez-vous s'il vous plaît partager ce que la version du navigateur sur quel OS?
- vous avez raison, je ne sais pas pourquoi, je n'ai pas dit... Chrome 24.0.1312 sur Win8. Après quelques tests, il s'avère RGBA est retourné pourquoi la couleur d'arrière-plan n'est pas défini, on en revient donc rgba(0,0,0,0). Les gens pourraient vouloir un essai sur l'Alpha de décider sur quel RVB à utiliser... j'ai personnellement décidé de récupérer les parents couleur d'arrière-plan si RGBA retourne 0 Alpha...
- n'oubliez pas radix: parseInt(x, 10)
- selon le MDN, "l'ECMAScript 5 de la spécification de la fonction parseInt ne permet plus implémentations pour traiter les Chaînes de caractères commençant par un 0 caractères que les valeurs octales", donc radix param pour les décimales conversions de base n'est pas nécessaire sur tous les navigateurs modernes.
- Il ne fonctionne pas pour la couleur rvba format
- Oui @MatiK, lorsque j'ai répondu à la seule OP préoccupation était RVB. Mais prendre un coup d'oeil à cette réponse sur la base de mon code d'origine de permettre un RGBA détection.
InformationsquelleAutor Erick Petrucelli

C'est un peu modifié la version de Erick Petrucelli de réponse. Il semble poignée 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]);
                    }
                }
            }
        };

InformationsquelleAutor li3

Vous devez vous connecter pour publier un commentaire.