Comment obtenir le code hexadécimal de la couleur d'arrière-plan d'un élément en JavaScript ?

Code hexadécimal de la couleur d'arrière-plan d'un élément

Dans ce didacticiel, nous nous plongeons dans un défi de programmation courant : obtenir le code couleur hexadécimal de la couleur d'un élément. couleur d'arrière-plan à l'aide JavaScript.

Exemple :

Considérez le code HTML et CSS suivant :

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

Utilisation de jQuery :

Grâce à la bibliothèque jQuery, vous pouvez accéder directement aux propriétés CSS d'un element :

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

Solution JavaScript personnalisée :

Vous pouvez également utiliser une fonction JavaScript personnalisée pour extraire la valeur de couleur au format hexadécimal :

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

En cliquant sur l'élément, vous pouvez récupérer le code couleur hexadécimal et l'afficher dans la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!