jquery .height() und .width() am span-Tag erhält inkonsistente Ergebnisse

Ich muss die Abmessungen eines Elements mit variabler Höhe und Breite, #sentence, erhalten, um die Dimensionen anderer verwandter Elemente zu ändern zu ihm. #sentence wird im Browserfenster zentriert, und seine Höhe und Breite werden unabhängig vom Inhalt bestimmt. Mein Code sieht wie folgt aus:jquery .height() und .width() am span-Tag erhält inkonsistente Ergebnisse

HTML

<body> 
    <div id="wrapper"> 
     <div id="cell"> 
      <span id="sentence"> 
       sentence 
      </span> 
     </div> 
    </div> 
</body>

CSS

body, html { 
    font-size: 18pt; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 
} 
#wrapper { 
    width: 100%; 
    height: 100%; 
    display: table; 
    text-align: center; 
} 
#cell { 
    display: table-cell; vertical-align: middle; 
} 

#sentence { 
    display: inline-block; 
    background-color: #abc; 
    padding: 1em; 
}

$(document).ready(function(){ 
    var h = $("#sentence").height(); 
    alert(h); 
});

Wenn ich versuche, die .height() oder .width() von #sentence zu bekommen, komme ich zurück inkonsistent Werte. Normalerweise für die Höhe ist es 28, aber manchmal kommt es als 19 zurück. Für die Breite bekomme ich 84 oder manchmal 52.

Ich dachte, dass der Unterschied möglicherweise von Bildlaufleisten vorübergehend verursacht und dann verschwinden, wenn die Seite geladen wird. Ich habe versucht, overflow: hidden; zu html und body hinzuzufügen, um alle Scrollbars loszuwerden, die angezeigt werden könnten, aber das hat nicht funktioniert. Ich habe auch versucht,

$(window).resize(function(){ 
    h = $("sentence").width(); 
});

Das hat nicht funktioniert. Die Verwendung von .css("height") scheint auch nicht zu funktionieren.

Also was wird? Warum habe ich dieses Problem? Vielen Dank im Voraus für jede Hilfe mit diesem.

Quelle

2012-04-11 ben

Ich würde eine jsFiddle erstellen ... Sie werden mehr Hilfe bekommen. –

Damit die Dimensionen korrekt sind, muss der Browser die Seite angelegt und gerendert haben. Dies ist nicht unbedingt der Fall, wenn das Ereignis .ready(...) ausgelöst wird.

Verwenden Sie stattdessen $(window).load(...).

Quelle

2012-04-11 02:52:38

Wenn ich sie austausche, funktioniert der Code überhaupt nicht mehr. Ich denke, '.ready()' sollte in Ordnung sein, da es überhaupt einen Wert bekommt, oder? – ben

Offenbar ist es nicht, da Sie zufällige Werte erhalten! Ich habe es geschafft, .load() selbst zu arbeiten ... –

'$ (window) .load (...)' funktioniert für mich. Vielen Dank. – todd

jquery .height() und .width() am span-Tag erhält inkonsistente Ergebnisse

Antwort

Verwandte Themen