Maison >interface Web >tutoriel CSS >Comment puis-je obtenir la couleur d'arrière-plan d'un élément Web sous forme de code hexadécimal à l'aide de JavaScript ?
Comment puis-je obtenir la couleur d'arrière-plan d'un élément Web sous forme de code hexadécimal à l'aide de JavaScript ?
- DDDoriginal
- 2024-12-31 17:45:10801parcourir
Obtention du code de couleur hexadécimal pour l'arrière-plan d'un élément
Lorsque vous travaillez avec des éléments Web, la possibilité de récupérer le code de couleur d'arrière-plan au format hexadécimal s'avère pratique pour divers styles. et à des fins de conception. Cette question examine le besoin d'un utilisateur d'acquérir le code de couleur d'arrière-plan d'un élément à l'aide de JavaScript et CSS.
Implémentation du code
Pour obtenir le code de couleur d'arrière-plan, on peut utiliser la fonction css() de JavaScript. . Par exemple, si vous souhaitez récupérer le code couleur d'arrière-plan d'un fichier
console.log($(".div").css("background-color"));
Ce code utilise la bibliothèque jQuery pour accéder à l'élément, et la fonction css() est ensuite utilisée pour récupérer la valeur pour la propriété "background-color". Le code de couleur d'arrière-plan résultant au format hexadécimal sera enregistré dans la console.
Fonction personnalisée pour la conversion hexadécimale
Alternativement, une fonction JavaScript personnalisée peut être définie pour convertir la valeur de couleur récupérée à partir du CSS () fonction au format hexadécimal. Voici un exemple :
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('');
}
Dans cet exemple, la fonction hexc() prend la valeur de couleur RVB en entrée et la convertit au format hexadécimal. La fonction est invoquée lorsque le
Ressources supplémentaires
Pour une démonstration pratique, reportez-vous au lien d'exemple de code fourni dans la question d'origine. Cliquez sur l'élément div pour récupérer sa valeur de couleur d'arrière-plan au format hexadécimal.
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!