Heim > Web-Frontend > js-Tutorial > Wie konvertiere ich RGB in Hex-Farbwerte in jQuery?

Wie konvertiere ich RGB in Hex-Farbwerte in jQuery?

Barbara Streisand
Freigeben: 2024-12-17 00:05:25
Original
967 Leute haben es durchsucht

How to Convert RGB to Hex Color Values in jQuery?

Erhalten von Hex-Farbwerten aus RGB-Farben in jQuery

Problem:

In jQuery erhält die Methode css() Die Hintergrundfarbe eines Elements als Rot-, Grün- und Blau-Werte (RGB) im Format rgb(r, g, b). Eine häufige Anforderung besteht jedoch darin, den entsprechenden Hex-Farbwert abzurufen, z. B. #FFFFFF.

Lösung:

Die herkömmliche Methode zum Ermitteln eines Hex-Werts aus RGB umfasst Folgendes: manuelle Konvertierung, was mühsam sein kann. Glücklicherweise erreicht dies eine prägnante einzeilige Funktion:

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
Nach dem Login kopieren

Diese Funktion spricht sowohl RGB- als auch RGBA-Formate an und gewährleistet so Vielseitigkeit.

Beispielverwendung:

const element = $('#selector');
const rgbColor = element.css('backgroundColor');
const hexColor = rgba2hex(rgbColor);
Nach dem Login kopieren

Aktualisierte Antwort für Modern Browser:

Seit der ursprünglichen Lösung hat sich die Browserunterstützung für ECMAScript 2015-Funktionen deutlich verbessert. Dies ermöglicht eine schlankere und präzisere Umwandlung von RGB in Hex:

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
Nach dem Login kopieren

Diese Funktion bietet eine ähnliche Funktionalität und ist speziell auf RGB-Farbformate zugeschnitten.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich RGB in Hex-Farbwerte in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage