Wie erhalte ich den Hex-Code für die Hintergrundfarbe eines Elements in JavaScript?

Hex-Code der Elementhintergrundfarbe

In diesem Tutorial befassen wir uns mit einer häufigen Programmierherausforderung: dem Ermitteln des hexadezimalen Farbcodes eines Elements Hintergrundfarbe verwenden JavaScript.

Beispiel:

Bedenken Sie den folgenden HTML- und CSS-Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">

Verwendung von jQuery:

Mit der jQuery-Bibliothek können Sie direkt auf die CSS-Eigenschaften eines zugreifen Element:

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

Benutzerdefinierte JavaScript-Lösung:

Alternativ können Sie eine benutzerdefinierte JavaScript-Funktion verwenden, um den Farbwert im Hexadezimalformat zu extrahieren:

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

Durch Klicken auf das Element können Sie den hexadezimalen Farbcode abrufen und in der Konsole anzeigen.

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Hex-Code für die Hintergrundfarbe eines Elements in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!