Pourquoi « myDiv.style.display » renvoie-t-il une chaîne vide lorsqu'elle est définie dans une feuille de style principale ?

Effets de la feuille de style principale sur le style d'affichage

Lors de l'affichage de contenu à l'aide du style d'affichage HTML, il est essentiel de comprendre comment les feuilles de style en ligne et principales affectent son comportement . Cet article explore le problème où myDiv.style.display renvoie une chaîne vide lorsqu'il est défini dans une feuille de style principale, contrairement à lorsqu'il est défini en ligne.

État d'affichage initial

HTML les éléments commencent généralement par une valeur d'affichage par défaut, généralement "en ligne". Pour contourner cela, les développeurs utilisent souvent des styles en ligne :

<div>

Cependant, pour augmenter la maintenabilité, il est avantageux de définir ces styles initiaux dans une feuille de style principale.

Comportement inattendu

Lors de la définition de display:none dans une feuille de style principale, l'état initial de l'élément reste masqué. Cependant, l'accès à myDiv.style.display à l'aide de JavaScript renvoie initialement une chaîne vide. Cela diffère des styles en ligne, où il renvoie "aucun".

Problème résolu lors de l'utilisation de getComputedStyle

La solution à ce problème réside dans la compréhension que l'accès direct aux propriétés CSS d'un élément (par exemple, element.style.display) récupère leurs paramètres de style en ligne. Pour accéder aux styles définis dans les feuilles de style externes ou dans les paramètres par défaut du navigateur, les développeurs doivent utiliser la méthode getComputedStyle :

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

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

En utilisant getComputedStyle, les développeurs peuvent récupérer avec précision les valeurs définies en externe, y compris celles des feuilles de style principales.

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!