Maison > interface Web > js tutoriel > le corps du texte

Méthode jQuery pour obtenir la valeur de couleur dans style_jquery

WBOY
Libérer: 2016-05-16 16:17:15
original
992 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery obtient la valeur de couleur dans le style. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Lorsque j'ai utilisé jQuery pour obtenir la valeur de background-color dans le style aujourd'hui, j'ai découvert que la valeur de couleur obtenue dans IE est dans un format différent de celui affiché dans Chrome et Firefox, elle est affichée en HEX. format [#ffff00], tandis que dans Chrome, Firefox affiche [rgb(255,0,0)] au format GRB Puisque les valeurs de couleur doivent être stockées dans la base de données, nous souhaitons unifier le format des valeurs de couleur. ​​(en fait, ils peuvent être stockés s'ils ne sont pas unifiés). Après recherche, j'ai obtenu un morceau de code provenant d'un site Web étranger :

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
 return rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
Copier après la connexion

La définition ci-dessus est une fonction jQuery. Nous pouvons obtenir la valeur RVB de la couleur d'arrière-plan de la balise id="bg" via $("#bg").getHexBackgroundColor();.

Faisons une petite modification, c'est-à-dire ajoutons un jugement. S'il s'agit d'un navigateur IE, récupérez simplement la valeur directement. S'il s'agit d'un navigateur non-IE, convertissez la valeur au format RVB :
.

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 if(!$.browser.msie){
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
  rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
 }
 return rgb;
}
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal