Comment accéder aux styles calculés avec JavaScript lorsque les styles en ligne remplacent les paramètres de la feuille de style principale ?

Accès au style à partir d'une feuille de style principale avec JavaScript

Lorsque vous définissez la propriété d'affichage d'un div sur "aucun" dans une feuille de style principale et que vous essayez de accédez-y via JavaScript en utilisant myDiv.style.display, vous pouvez rencontrer une valeur de retour vide. En effet, il existe une distinction entre les styles en ligne et les styles calculés.

Les styles en ligne sont définis directement sur l'élément HTML lui-même, tandis que les styles calculés sont une combinaison de tous les styles appliqués à un élément, y compris ceux définis dans feuilles de style externes ou éléments parents. Lorsqu'un style en ligne est présent, il remplace tout style calculé en conflit.

Lorsque vous accédez à la propriété de style d'un élément via JavaScript, vous ne pouvez lire que les styles en ligne. Par conséquent, si vous définissez la propriété d'affichage sur "aucun" dans la feuille de style principale mais que vous disposez d'un style en ligne qui la remplace, myDiv.style.display renverra une chaîne vide.

Pour accéder au style calculé, vous devez pour utiliser la fonction getComputedStyle(). Cette fonction renvoie un objet qui contient tous les styles calculés pour un élément, y compris ceux définis dans les feuilles de style externes ou les éléments parents.

Voici un exemple d'utilisation de getComputedStyle() pour récupérer la propriété d'affichage calculée :

var display = getComputedStyle(myDiv).display;

En utilisant getComputedStyle(), vous pouvez accéder au style calculé d'un élément, même s'il a été remplacé par un style en ligne.

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!