Heim > Web-Frontend > js-Tutorial > jQuery-Methode zum Abrufen des Farbwerts in style_jquery

jQuery-Methode zum Abrufen des Farbwerts in style_jquery

WBOY
Freigeben: 2016-05-16 16:17:15
Original
1034 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Farbwert im Stil erhält. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Als ich heute jQuery verwendet habe, um den Wert der Hintergrundfarbe im Stil abzurufen, habe ich festgestellt, dass der im IE erhaltene Farbwert ein anderes Format hat als der in Chrome und Firefox angezeigte. Im IE wird er in HEX angezeigt Format [#ffff00], während Firefox in Chrome [rgb(255,0,0)] im GRB-Format anzeigt. Da die Farbwerte in der Datenbank gespeichert werden müssen, möchten wir das Format der Farbwerte vereinheitlichen ​​(tatsächlich können sie gespeichert werden, wenn sie nicht einheitlich sind). Nach der Suche habe ich einen Code von einer ausländischen Website gefunden:

$.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]);
}
Nach dem Login kopieren

Die obige Definition ist eine jQuery-Funktion. Wir können den RGB-Wert der Hintergrundfarbe des Tags id="bg" über $("#bg").getHexBackgroundColor(); abrufen.

Nehmen wir eine kleine Änderung vor, das heißt, fügen wir ein Urteil hinzu. Wenn es sich um einen IE-Browser handelt, holen wir uns den Wert direkt. Wenn es sich um einen Nicht-IE-Browser handelt, konvertieren wir den Wert in das RGB-Format:

$.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;
}
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage