Comment obtenir le CSS d'un div avec jquery

Dans le développement front-end, il est souvent utilisé pour obtenir le style CSS des éléments DOM. jQuery est une bibliothèque JavaScript populaire qui fournit de nombreuses méthodes pour obtenir et modifier facilement les styles CSS des éléments DOM. Cet article explique comment utiliser jQuery pour obtenir le style CSS d'un div.

1. Utilisez la méthode .css() pour obtenir le style CSS du div

L'une des fonctions principales de jQuery est de définir et d'obtenir le style CSS. La méthode .css() est utilisée pour obtenir ou définir les attributs de style d'un élément. Grâce à cette méthode, vous pouvez obtenir les attributs de style du div. Par exemple, pour obtenir la couleur de fond d'un div, vous pouvez utiliser le code suivant :

var bgColor = $('div').css('background-color');

De cette façon, vous pouvez obtenir la couleur de fond du div et la stocker dans la variable bgColor. La méthode

.css() peut également obtenir plusieurs propriétés CSS en même temps, par exemple :

var divStyles = $('div').css(['background-color', 'font-size', 'color']);

De cette façon, vous pouvez ajouter une couleur d'arrière-plan, une taille de police, une police couleur et autres attributs de style à la fois La propriété est obtenue et stockée dans un objet.

2. Utilisez la méthode .attr() pour obtenir le style CSS du div

En plus de la méthode .css(), jQuery fournit également la méthode .attr( ) méthode pour obtenir certaines propriétés de l'élément. Le style CSS peut également être considéré comme un attribut de l'élément, vous pouvez donc également utiliser la méthode .attr() pour obtenir l'attribut CSS du div. Par exemple :

var bgColor = $('div').attr('style');

De cette façon, vous pouvez obtenir tous les attributs de style CSS du div et les stocker dans la variable bgColor. A noter que les attributs de style CSS ainsi obtenus sont renvoyés sous forme de chaînes.

3. Utilisez la méthode .getComputedStyle() pour obtenir le style CSS du div

Dans certains navigateurs avancés, vous pouvez également utiliser la méthode JavaScript native getComputedStyle() pour obtenir la valeur de l'attribut de style CSS div, et cette méthode peut également être appelée via jQuery. Par exemple :

var bgColor = window.getComputedStyle($('div')[0]).getPropertyValue('background-color');

De cette façon, vous pouvez obtenir la couleur d'arrière-plan du div et la stocker dans la variable bgColor. Il convient de noter que la méthode window.getComputedStyle() renvoie un objet, pas une chaîne ou un nombre. Et dans cette méthode, l'élément div doit exister et être visible. Si cet élément ou le document dans lequel il se trouve n'est pas visible ou rendu, les attributs de style obtenus peuvent être incorrects ou incomplets.

Pour résumer, il n'est pas difficile d'utiliser jQuery pour obtenir les propriétés de style CSS d'un div. Que vous utilisiez la méthode .css(), la méthode .attr() ou la méthode JavaScript native getComputedStyel(), vous pouvez obtenir les attributs de style CSS du div. Ces méthodes nous permettent d'obtenir facilement les propriétés CSS des éléments requis, ce qui facilite le développement et le débogage.

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!