jquery implementiert die Methode zum Konvertieren des erhaltenen Farbwerts in hexadezimale Form_jquery

Das Beispiel in diesem Artikel beschreibt, wie JQuery den erhaltenen Farbwert in Hexadezimalform umwandelt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Möglicherweise ist Ihnen aufgefallen, dass in den Browsern Google, Firefox und IE8 und höher die erhaltenen Farbwerte im RGB-Format vorliegen, z. B. rgb(255,255,0), was sich bei der tatsächlichen Codierung als sehr unbequem oder unbequem anfühlt. Zu diesem Zeitpunkt ist eine Konvertierung erforderlich, und unten wird ein relevanter Konvertierungscode bereitgestellt.

Der spezifische Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Skript-Startseite

Hinweis: Nachdem Sie den Editor ausgeführt haben, drücken Sie F5, um die Webseite zu aktualisieren und die Demo anzuzeigen.

Der obige Code realisiert unsere Anforderungen und kann Farbwerte im RGB-Format in Hexadezimalform umwandeln. Hier ist eine kurze Einführung in den Implementierungsprozess:

1. Umsetzungsprinzip:

Wenn auf die Schaltfläche geklickt wird, wird ein Klickereignis ausgelöst und die Verarbeitungsfunktion für das Klickereignis wird in das Div geschrieben. Die Kernfunktion ist getHexBackgroundColor() Bestimmen Sie zunächst, ob der Browser unter IE9 läuft. Wenn ja, wird der Farbwert direkt ohne Konvertierung zurückgegeben, da der vom Browser unter IE9 erhaltene Farbwert hexadezimal ist. Wenn es sich um einen Browser über IE8 oder Google Firefox handelt, erfolgt die Konvertierung Ich werde hier nicht näher auf die Konvertierung eingehen. Sie können sich auf Ihre Codekommentare beziehen.

2. Codekommentare:

1.$.fn.getHexBackgroundColor=function(id,property){}, deklariert eine Funktion, die Farbwerte konvertieren kann. Der erste Parameter ist der id-Attributwert des Elements eines ist das Attribut.

2.var rgb=$(id).css(property), erhält den Farbwert. Zu diesem Zeitpunkt kann RGB im Hexadezimal- oder RGB-Format vorliegen.

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit), bestimmen Sie, ob der Browser IE8 oder höher oder Firefox oder Google Chrome ist.

4.rgb=rgb.match(/^rgb((d ),s*(d ),s*(d ))$/), dies erfordert ein gewisses Verständnis regulärer Ausdrücke durch die Funktion match() Farbwertzeichenfolge kann in ein Array generiert werden. Dieses Array enthält 4 Elemente. Das erste Element ist die gesamte Farbwertzeichenfolge Das zweite Array-Element ist 102, das dritte ist 0 und das vierte ist 255.

5. Funktion hex(x){}, deklariert eine Funktion. Sie kann zum Konvertieren von Farbwerten verwendet werden und übergibt ein Element des RGB-Arrays.

6.return ("0" parseInt(x).toString(16)).slice(-2), Sie können den eingehenden Wert in einen Hexadezimalwert umwandeln. Beachten Sie, dass eine 0 vorangestellt wird Slice Die Funktion fängt die letzten beiden Zeichen ab und gibt die abgefangenen zwei Zeichen zurück.

7.rgb="#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]), kombinieren Sie die Werte.

8.rgb zurückgeben, den RGB-Wert zurückgeben.

9.$(document).ready(function(){}), wenn die Dokumentstruktur vollständig geladen ist, führen Sie den Code in der Funktion aus.

10.$("#bt").click(function(){}), registrieren Sie den Click-Event-Handler für die Schaltfläche.

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) , schreibe den konvertierten Farbwert in das div.

3. Verwandte Lektüre:

1. Informationen zur Bestimmung der Browserversion finden Sie unter „JavaScript zur Bestimmung des Browsertyps und der Browserversion“.
2. Informationen zur Funktion parseInt() finden Sie unter „Definition und Nutzungsanalyse der Funktion parseInt() in JavaScript“.
3. Informationen zur Funktion toString() finden Sie unter „Analyse der toString()-Methode des Zahlenobjekts in JavaScript“.
4. Informationen zur Funktion „slice()“ finden Sie unter „Analyse der Methode „slice()“ des String-Objekts in JavaScript“.
5. Informationen zu Klickereignissen finden Sie unter „Definition und Verwendung von Klickereignissen in jQuery“.
6. Informationen zur Funktion text() finden Sie unter „Analyse der Verwendung der text()-Methode von JQuery“.

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