jquery implémente la méthode de conversion de la valeur de couleur obtenue en forme hexadécimale_jquery

L'exemple de cet article décrit comment jquery convertit la valeur de couleur obtenue sous forme hexadécimale. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Vous avez peut-être remarqué que dans les navigateurs Google, Firefox et IE8 et supérieurs, les valeurs de couleur obtenues sont au format RVB, tel que rgb(255,255,0), ce qui semble très inconfortable ou peu pratique à utiliser dans le codage réel. À l’heure actuelle, une conversion est requise et un code de conversion pertinent est fourni ci-dessous.

Le code spécifique est le suivant :

Copier le code Le code est le suivant :

Conversion du format de couleur-Script Accueil

Accueil du script

Remarque : après avoir exécuté l'éditeur, appuyez sur F5 pour actualiser la page Web et afficher la démo.

Le code ci-dessus répond à nos exigences et peut convertir les valeurs de couleur au format RVB en forme hexadécimale. Voici une brève introduction au processus d'implémentation :

.

1.Principe de mise en œuvre :

Lorsque vous cliquez sur le bouton, un événement de clic sera déclenché et la fonction de traitement de l'événement de clic sera exécutée. Cette fonction de traitement peut écrire la valeur de couleur convertie dans le div. La fonction principale est getHexBackgroundColor(). Déterminez d'abord la navigation. Si le navigateur est sous IE9, si c'est le cas, la valeur de couleur sera renvoyée directement sans conversion, car la valeur de couleur obtenue par le navigateur sous IE9 est hexadécimale. S'il s'agit d'un navigateur supérieur à IE8 ou Google Firefox, la conversion se fera. être requis. Je n’entrerai pas dans les détails de la conversion ici. Vous pouvez vous référer aux commentaires de votre code.

2. Commentaires du code :

1.$.fn.getHexBackgroundColor=function(id,property){}, déclare une fonction qui peut convertir les valeurs de couleur. Cette fonction a deux paramètres. Le premier paramètre est la valeur de l'attribut id de l'élément, le second. l'un est l'attribut.

2.var rgb=$(id).css(property), obtenez la valeur de couleur À ce stade, RVB peut être au format hexadécimal ou RVB.

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit), déterminez si le navigateur est IE8 ou supérieur ou Firefox ou Google Chrome.

4.rgb=rgb.match(/^rgb((d ),s*(d ),s*(d ))$/), cela nécessite une certaine compréhension des expressions régulières, via la fonction match(). La chaîne de valeur de couleur peut être générée dans un tableau. Il y a 4 éléments dans ce tableau. Prenez rgb(102, 0, 255) comme exemple. Le premier élément est la chaîne de valeur de couleur entière rgb(102, 0, 255). le deuxième élément du tableau est 102, le troisième est 0 et le quatrième est 255.

5. function hex(x){}, déclare une fonction. Cette fonction peut être utilisée pour convertir les valeurs de couleur. Elle a un paramètre et transmet un élément du tableau RVB.

6.return ("0" parseInt(x).toString(16)).slice(-2), vous pouvez convertir la valeur entrante en hexadécimal. Notez qu'un 0 est ajouté devant. Il est préférable d'utiliser. slice La fonction intercepte les deux derniers caractères et renvoie les deux caractères interceptés.

7.rgb="#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]), combinez les valeurs.

8.return rgb, renvoie la valeur RVB.

9.$(document).ready(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.

10.$("#bt").click(function(){}), enregistrez le gestionnaire d'événements de clic pour le bouton.

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) , écrivez la valeur de couleur convertie dans le div.

3. Lecture connexe :

1. Pour déterminer la version du navigateur, veuillez vous référer à « JavaScript pour déterminer le type et la version du navigateur ».
2. Pour la fonction parseInt(), veuillez vous référer à "Définition et analyse de l'utilisation de la fonction parseInt() en JavaScript".
3. Pour la fonction toString(), veuillez vous référer à "Analyse de la méthode toString() de l'objet numérique en JavaScript".
4. Pour la fonction slice(), veuillez vous référer à "Analyse de la méthode slice() de l'objet String en JavaScript".
5. Pour les événements de clic, veuillez vous référer à "Définition et utilisation des événements de clic dans jQuery".
6. Pour la fonction text(), veuillez vous référer à "Analyse de l'utilisation de la méthode text() de JQuery".

J'espère que cet article sera utile à la programmation jQuery de chacun.