Comment obtenir la hauteur et la largeur des éléments cachés (affichage : aucun) dans les compétences javascript_javascript

JS est relativement pratique pour obtenir la taille des éléments visibles Vous pouvez utiliser cette méthode directement :

Copier le code Le code. est la suivante :

function getDefaultStyle(obj,attribute){ // Renvoie la fonction de style finale, compatible avec IE et DOM, définit les paramètres : objet élément, caractéristiques de style
return obj.currentStyle ?obj.currentStyle[attribute ]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

Mais si cet élément est masqué (display:none), la taille est inconnue. Adaptable, comment la méthode ci-dessus peut-elle ne pas fonctionner ! Parce que les éléments avec display:none n'ont pas de taille physique ! Une tragédie s'est produite comme ça !

Heureusement, il existe une visibilité:hidden en CSS, qui est un attribut invisible. La plus grande différence entre celui-ci et display:none est que visible:hidden a une taille physique. Si vous avez une taille physique, vous pouvez obtenir la taille via la méthode ci-dessus, mais après avoir changé display:none en visibilité:hidden, la page aura un espace vide même si vous changez visibilité:hidden en display:none immédiatement après l'avoir obtenue. la taille, la page sera là Certaines parties trembleront encore un peu. Le meilleur moyen est alors de déplacer l'élément masqué hors de l'écran ou hors du flux de documents (position : absolue). Cela semble parfait, mais la tragédie se produit à nouveau. Si vous souhaitez afficher à nouveau cet élément, l'élément sera invisible et la position est erronée, car cet élément visibilité : caché ; position : absolue. Ainsi, après avoir obtenu la taille, vous devez restaurer le style. Redéfinissez simplement les propriétés de position et de visibilité sur leurs styles d'origine.

Il s'agit de la méthode d'implémentation de base pour obtenir la taille des éléments cachés en js. Si vous êtes intéressé, vous pouvez lire la méthode dans le livre "Maîtriser JavaScript".

J'ai aussi fait une démo simple ici, vous pouvez jeter un oeil au code source :

Copiez le code Le code est la suivante :

 

这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

 

这是test容器，这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

       

点我

       

隐藏元素的尺寸。