Comment puis-je vérifier l'état d'affichage CSS d'un élément à l'aide de JavaScript ?

Détermination de l'état d'affichage CSS des éléments avec JavaScript

Dans le développement Web, il est souvent nécessaire de manipuler ou de vérifier les propriétés CSS des éléments de manière dynamique. Un aspect qu'il peut être utile de vérifier est l'état d'affichage d'un élément, notamment s'il est visible (affichage défini sur "bloquer") ou masqué (affichage défini sur "aucun").

Utiliser JavaScript pour vérifier Affichage des éléments

Pour vérifier la propriété d'affichage CSS d'un élément à l'aide de JavaScript, vous pouvez utiliser deux principaux méthodes :

1. Vérification du style calculé :

Cette méthode convient aux éléments dont les propriétés d'affichage sont héritées ou spécifiées dans les règles CSS. Pour obtenir le style calculé, vous pouvez utiliser le code suivant :

const element = document.getElementById('element-id');
const computedStyle = window.getComputedStyle(element, null);
const displayStyle = computedStyle.display;

2. Vérification du style en ligne :

Si le style a été déclaré en ligne ou avec JavaScript, vous pouvez accéder directement à la propriété de style de l'élément comme suit :

const element = document.getElementById('element-id');
const displayStyle = element.style.display;

Détermination Statut d'affichage :

Une fois que vous avez le displayStyle, vous pouvez utiliser une instruction conditionnelle pour déterminer si l'élément est visible ou caché :

if (displayStyle === 'block') {
  // Element is visible
} else if (displayStyle === 'none') {
  // Element is hidden
}

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!