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
Barbara StreisandOriginal
2024-12-17 00:05:251003Durchsuche

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('')}`

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);

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('')}`

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!

Stellungnahme:
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