Wie kann ich mithilfe von JavaScript die Hintergrundfarbe eines Webelements als Hexadezimalcode abrufen?-CSS-Tutorial-php.cn

How Can I Get a Web Element's Background Color as a Hexadecimal Code Using JavaScript?

Erhalten des hexadezimalen Farbcodes für den Hintergrund eines Elements

Bei der Arbeit mit Webelementen ist die Möglichkeit, den Hintergrundfarbcode im Hexadezimalformat abzurufen, für verschiedene Stile nützlich und Designzwecke. Diese Frage befasst sich mit dem Bedürfnis eines Benutzers, den Hintergrundfarbcode eines Elements mithilfe von JavaScript und CSS zu ermitteln.

Code-Implementierung

Um den Hintergrundfarbcode zu erhalten, kann man die CSS()-Funktion von JavaScript verwenden . Wenn Sie beispielsweise den Hintergrundfarbcode eines

Element mit dem Klassennamen „div“ kann das folgende Code-Snippet verwendet werden:

console.log($(".div").css("background-color"));

Nach dem Login kopieren

Dieser Code verwendet die jQuery-Bibliothek, um auf das Element zuzugreifen, und die Funktion css() wird dann verwendet, um den Wert abzurufen für die Eigenschaft „Hintergrundfarbe“. Der resultierende Hintergrundfarbcode im Hexadezimalformat wird in der Konsole protokolliert.

Benutzerdefinierte Funktion zur Hexadezimalkonvertierung

Alternativ kann eine benutzerdefinierte JavaScript-Funktion definiert werden, um den abgerufenen Farbwert aus dem CSS zu konvertieren ()-Funktion in das Hexadezimalformat umwandeln. Hier ist ein Beispiel:

var color = '';
$('div').click(function() {
  var x = $(this).css('backgroundColor');
  hexc(x);
  console.log(color);
})

function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
}

Nach dem Login kopieren

In diesem Beispiel nimmt die Funktion hexc() den RGB-Farbwert als Eingabe und wandelt ihn in das Hexadezimalformat um. Die Funktion wird aufgerufen, wenn

Element angeklickt wird. Der resultierende hexadezimale Farbcode wird in der Farbvariablen gespeichert und in der Konsole protokolliert.

Zusätzliche Ressourcen

Eine praktische Demonstration finden Sie unter dem Codebeispiel-Link in der ursprünglichen Frage. Klicken Sie auf das div-Element, um seinen Hintergrundfarbwert im Hexadezimalformat abzurufen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript die Hintergrundfarbe eines Webelements als Hexadezimalcode abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie erstelle ich mit CSS eine umgekehrte oder ausgeschnittene Kreisform? Nächster Artikel：Wie eliminiere ich Leerraum- und Scrollprobleme mit Canvas in einem Div-Container?

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