Pourquoi jquery return 0 pour un offsetHeight quand firebug dit que c'est du 34?
Donc, j'ai un div dont le contenu est généré lors de l'exécution au départ, il n'a pas de hauteur associée. Quand il est générée en fonction de firebug et de ce que je peux alerte js la div a encore une hauteur de 0. Cependant, en regardant les propriétés en lecture seule avec firebug je vois qu'il a un décalage de la hauteur de 34. C'est cette valeur que j'ai besoin. J'espère que c'est évident, mais dans le cas où il n'est pas le cas, ce nombre est variable, il n'est pas toujours 38.
Alors, j'ai pensé que je pourrais obtenir juste que, ce faisant, via jquery...
$("#parentDiv").attr('offsetHeight');
ou ce droit js...
document.getElementById("parentDiv").offsetHeight;
Mais tout ce qui est renvoyé est 0. A-t-elle quelque chose à voir avec le fait que compenser la hauteur est une propriété en lecture seule dans ce cas? Comment puis-je obtenir cette hauteur? Je veux dire firebug est en train de comprendre d'une certaine manière donc il semble que je devrais être en mesure de.
Edit:
Voici un échantillon de ce que la div ressemble maintenant...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
</DIV>
</DIV>
</DIV>
</DIV></FORM></BODY></HTML>
Ce code est généré par un contrôle dans une bibliothèque séparée. Voici donc le code de la créer dans mon .page aspx.
<blah:blahControl ID="control" runat="server" />
Ok, c'est légèrement modifiée, mais ça c'est un tout HTML beaucoup plus que ce que j'avais avant. La div je faisais allusion à "parentDiv" avant est appelé "ctl00_BodyContentPlaceHolder_Usercontrol" là-haut. Ce code comprend la div en question, c'est de la fratrie, parents, grands-parents et les enfants. C'est presque une copie directe de firebug.
mise à Jour:
Je devrais avoir mentionné cela est fait dans IE 7. Il semblait bien fonctionner une fois dans Firefox, mais il est de retour 0 maintenant. Est-ce à fournir toutes les nouvelles idées de contournement possible ou quoi que ce soit?
... Vous tous devez penser que je suis folle.
mise à Jour:
Certains style...
.TransparentBg
{
background-color: white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.Foreground
{
position: absolute;
top: 0px;
}
Accusé de réception. Lettres majuscules FTL!
Je ne sais pas où j'ai dit qu'il n'a rien à voir avec jQuery. Je ne sais pas ce qu'il a à faire avec, c'est mon problème, je vais jeter les dom tag sur là-bas si vous le souhaitez. Les bouchons sont générés, ce n'est pas mon fait.
OriginalL'auteur |
Vous devez vous connecter pour publier un commentaire.
Êtes-vous sûr que ce n'est pas un Heisenbug? Si vous êtes réglage de la hauteur de quelque part par programme et ensuite essayer de le lire bientôt après, il y a une chance DOM n'aurait pas mis à jour.
OriginalL'auteur Chetan Sastry
Êtes-vous sûr que l'élément est inclus dans le document de l'arbre, et rendu? (ie. pas “display: none”, mais “visibility: hidden” est OK.)
Un élément qui n'est pas en fait de prendre partie dans le document de rendre le processus n'a pas de dimensions, et de donner une offsetWidth/Hauteur de 0.
L'ETA après l'exemple de code ajouté: grâce à votre code exact, je reçois offsetHeight sur la div ‘17’. La première image est correctement dimensionné, le deuxième n'a pas de taille.
C'est correct comme rendu(*). Toutes les images qui ne parviennent pas à charger sont remplacés par leur texte en ligne d'envergure. Votre image n'a pas de texte alternatif, elle est donc remplacée par une chaîne vide. Normalement, comme un élément inline, ce ne peut pas être réglé à une taille particulière. L'exception est la première image, parce que vous avez donné ‘display: block’, ce qui le rend maniable pour le dimensionnement explicite fournie par la largeur/hauteur.
En Mode Quirks, vous auriez eu peu " cassé l'image des icônes de taille moyenne le même que les images étaient censés être. Cela ne se produit pas en Mode standard car il est supposé que vous savez comment utiliser alt texte correctement si vous êtes à l'aide de normes.
De toute façon, les dimensions de mesure fonctionne très bien pour moi si je remplace les "..." Url avec un réel travail d'adresses.
(*: bien que vous ne pouvez pas le voir à cause de la plutôt bizarre "trop-plein caché" sur le code html et ‘gauche: 1597px; " combo. Eh bien, sauf si vous avez un vraiment large écran!)
pouvez-vous mettre un cas de test en ligne? Si j'utilise le bout de code que vous avez posté ci-dessus, puis alert(document.getElementById("parentDiv").offsetHeight), je reçois à la hauteur prévue.
Pour le code j'ai aujourd'hui, si je fais une alerte juste comme ça, sauf pour ctl00_BodyContentPlaceHolder_Usercontrol-je obtenir 0 est retourné.
Les excuses, les images n'ont texte alt. J'ai édité les sources, et alt textes. Je n'ai jamais su qu'il ferait une différence, apprendre quelque chose de nouveau chaque jour! Aussi je peux le voir, j'ai un grand écran, mais la gauche est généré sur la base de la résolution de l'écran. Lâchant ma résolution va changer sa du val.
OriginalL'auteur bobince
Essayer d'appeler la fonction decaler une fois tous les DOM et les images sont entièrement chargés avec load() au lieu de document.ready().
$(window).load(function () {
//Mettre le code pour la hauteur ici
});
OriginalL'auteur Saneef
Le chargement de ce fichier avec une pièce IMG SRC donne 3 boîtes d'alerte de "37". Sans valide IMG SRC cela donne "17" sur tous les trois.
Quelle est la version de Jquery utilisez-vous? Et la version de FireFox/IE?
Juste testé, et n'a pas d'incidence sur quoi que ce soit. Cependant, je fais la hauteur retournés correctement.
hmmm, intéressant... c'est à dire 7, jQuery 1.3.1
Je reçois de la validité de la hauteur lorsque j'utilise Firefox pour cela. C'est génial car il est uniquement destiné à être utilisé avec IE7.
Je reçois des non-zéro réponses à l'aide de jQuery 1.3.2 dans IE6 ("34"), IE7 ("38") et FireFox ("37"). Si vous passez les images à partir des attributs de la hauteur/largeur de plus pour style="hauteur/largeur", puis tous les 3 navigateurs show "34".
OriginalL'auteur s_hewitt
Je viens de trouver une question où j'ai fait le offsetHeight d'un élément lorsque le doc était prêt, mais il était dans un conteneur qui a été caché.
Il en est résulté une offsetHeight valeur de 0, mais firebug a dit qu'il avait une hauteur de 32.
OriginalL'auteur