Javascript Girl
  1. Javascript Girl
  3. Comment trouvez-vous les dimensions d'un élément "affichage: aucun"?
Intereting Posts
Liste d'animation de réorganisation avec angularjs Désactivez le double clic gauche sur google map GWT vs. ScriptSharp Avantages et inconvénients Pourquoi la fonction de triage Javascript () ne donne-t-elle pas la sortie attendue? Est-il possible d'obtenir l'index numérique de l'élément dans son nœud parent sans boucle? Simuler un clic dans jQuery / JavaScript sur un lien Fonction d'appel Javascript Méthode de la meilleure méthode pour $ http loading popup Ng-change function in angularjs personnalisé mise à jour de la mise à jour de la valeur d'entrée après la seconde entrée de l'utilisateur Javascript SetTimeout et Loops Modification des en-têtes de réponse HTTP dans Firefox Javascript set CSS: après les styles Je dois extraire toutes les valeurs d'identification avec des casperjs JavaScript identique politique d'origine – Comment s'applique-t-il à différents sous-domaines? Envoyer des données de javascript à une base de données mysql

Comment trouvez-vous les dimensions d'un élément "affichage: aucun"?

J'ai des éléments enfants à l'intérieur d'un div qui obtient l' display: none CSS display: none appliqué et je veux savoir quelles sont les dimensions des éléments enfants. Comment puis-je faire ceci?

Fiddle Demo 

 var o = document.getElementById('output'); var wmd1 = document.getElementById('whats-my-dims1'); var wmd2 = document.getElementById('whats-my-dims2'); o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"'; 
 #some-hidden-div{ display: none; } .whats-my-dims{ width: 69px; height: 42px; background-color: #f00; } 
 <div id='output'>Processing... :p</div> <div id='some-hidden-div'> <div class='whats-my-dims' id='whats-my-dims1'></div> </div> <div class='whats-my-dims' id='whats-my-dims2'></div>

Je peux seulement utiliser JavaScript pur (pas jQuery).

Je ne peux pas changer top / left / right / bottom / transform / translate / etc car cela fera partie d'un composant personnalisé de la feuille de sprite animé qui peut avoir des éléments enfants.

Utilisez window.getComputedStyle() 

 var o = document.getElementById('output'); var wmd1 = document.getElementById('whats-my-dims1'); var wmd2 = document.getElementById('whats-my-dims2'); o.innerHTML = 'wmd1: "' + window.getComputedStyle(wmd1).getPropertyValue("width") + '", "' + window.getComputedStyle(wmd1).getPropertyValue("height") + '", wmd2: "' + window.getComputedStyle(wmd2).getPropertyValue("width") + '", "' + window.getComputedStyle(wmd2).getPropertyValue("height") + '"'; 
 #some-hidden-div{ display: none; } .whats-my-dims{ display:block; width: 69px; height: 42px; background-color: #f00; } 
 <div id='output'> Processing... :p </div> <div> Sooo... How do I get the width and height of whats-my-dims1? </div> <div id='some-hidden-div'> <div class='whats-my-dims' id='whats-my-dims1'></div> </div> <div class='whats-my-dims' id='whats-my-dims2'></div>

Vous ne trouvez pas les dimensions d'un élément avec l' display: none mais vous pouvez activer l'affichage, obtenir les dimensions et les remettre à caché. Cela n'entraînerait aucune différence visuelle. 

 var o = document.getElementById('output'); var wmd1 = document.getElementById('whats-my-dims1'); var someHiddenDiv = document.querySelector('#some-hidden-div'); someHiddenDiv.style.display = 'block'; var wmd2 = document.getElementById('whats-my-dims2'); o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"'; someHiddenDiv.style.display = 'none'; 
 #some-hidden-div { display: none; } .whats-my-dims { width: 75px; height: 42px; background-color: #f00; } 
 <div id='output'> Processing... :p </div> <div> Sooo... How do I get the width and height of whats-my-dims1? </div> <div id='some-hidden-div'> <div class='whats-my-dims' id='whats-my-dims1'></div> </div> <div class='whats-my-dims' id='whats-my-dims2'></div>

Vous ne pouvez pas obtenir les dimensions d'un élément avec l' display: none , car car il est caché, il ne prend aucun espace, donc il n'a aucune dimension. La même chose s'applique à ses enfants.

Vous pouvez plutôt rendre l'élément visible pendant un certain temps, vérifier les dimensions de l'enfant et rendre l'élément invisible. Comme indiqué par @JanDvorak:

Les navigateurs ne repoussent pas lorsque le Javascript synchrone est en cours d'exécution, de sorte que l'élément ne doit jamais apparaître à l'écran.

Exemple de code: 

 var o = document.getElementById('output'); var wmd1 = document.getElementById('whats-my-dims1'); var wmd2 = document.getElementById('whats-my-dims2'); var hiddenDiv = document.getElementById("some-hidden-div"); hiddenDiv.style.display = "block"; o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"'; hiddenDiv.style.display = "";

Voir démo sur JS Fiddle .

Vous pouvez ajouter ceci: 

 var wmd1Style = window.getComputedStyle(wmd1); o.innerHTML = 'wmd1: "' + parseInt(wmd1Style['width'], 10) + '", "' + parseInt(wmd1Style['height'], 10) + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';