Pourquoi « myDiv.style.display » renvoie-t-il une chaîne vide lorsque l'affichage est défini dans une feuille de style principale ?

Feuilles de style principales et styles en ligne : compréhension du comportement de la propriété d'affichage

Lors de la tentative de récupération de la propriété d'affichage d'un élément DIV à l'aide de JavaScript, une divergence a été observée. En définissant l'affichage sur aucun en ligne dans l'élément HTML, myDiv.style.display renvoie "aucun" comme prévu. Cependant, définir l'affichage comme aucun dans une feuille de style principale entraîne une chaîne vide lors de l'accès via myDiv.style.display.

Ce comportement est compris en fonction de la manière dont JavaScript fonctionne. Lors de l'accès aux éléments DOM via JavaScript, le style calculé de l'élément ne peut pas être récupéré directement puisqu'il est défini dans le fichier CSS.

Solution : Utiliser getComputedStyle

Pour obtenir Pour déterminer le style calculé et résoudre cet écart, il est nécessaire d'utiliser la propriété getComputedStyle ou currentStyle pour Internet Explorer. Cette propriété récupère la valeur calculée de la propriété de style souhaitée.

Fonction JavaScript pour récupérer le style calculé

function getStyle(id, name) {
  var element = document.getElementById(id);
  return element.currentStyle
    ? element.currentStyle[name]
    : window.getComputedStyle
    ? window.getComputedStyle(element, null).getPropertyValue(name)
    : null;
}

Utilisation

Utilisation de getStyle pour récupérer la propriété d'affichage :

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

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!