auf Körper Verzögerung oder angegebene Breite benötigt für eine korrekte

Rendering (Dies ist ein Follow-up auf my previous question, wenn jemand in der Hintergrundgeschichte zum Zwecke der Unterhaltung interessiert ist. Es wird wahrscheinlich Sie diese Frage nicht helfen, zu verstehen.)auf Körper Verzögerung oder angegebene Breite benötigt für eine korrekte

Hier sind zwei Elemente <aside> und <main>, die ihre Breite und Höhe über JavaScript bekommen haben, so dass ihre kombinierte Breite die Breite des Bildschirms ist (beachten Sie, dass ihre Anzeige inline-block ist). Wenn Sie diesen Code in Ihren Web-Browser laufen (eine maximierte Browser so, dass die Breite des Browsers die Breite des Bildschirms entspricht) werden Sie feststellen, dass der Körper nicht überraschend nicht richtig die Elemente passen:

<!DOCTYPE html> 
<html>  
<body> 

<aside></aside><!-- comment to remove inline-block whitespace 

--><main></main> 

<script> 
    var h = screen.height/100; 
    var w = screen.width/100; 

    var e = document.getElementsByTagName("aside")[0].style; 
    e.display = "inline-block"; 
    e.backgroundColor = "lightblue"; 
    e.width = 14*w + "px"; 
    e.height = 69*h + "px"; 
    e.marginRight = 0.5*w + "px"; 

    e = document.getElementsByTagName("main")[0].style; 
    e.display = "inline-block"; 
    e.backgroundColor = "green"; 
    e.width = 85.5*w + "px"; 
    e.height = 69*h + "px"; 

    e = document.getElementsByTagName("body")[0].style; 
    e.margin = e.padding = "0"; 
    e.backgroundColor = "black"; 
</script> 
</body> 
</html>

Wenn Sie Geben Sie dem JavaScript jedoch eine Verzögerung, die Elemente werden ordnungsgemäß gerendert. Dies deutet darauf hin, dass der Körper irgendwie „braucht Zeit“ seine richtige Breite, um herauszufinden:

<script> 
    setTimeout(function() { 

    [...] 

    }, 200); 
</script>

Es ist auch möglich, dem Körper die angegebene Breite von screen.width anstelle der Einführung der Verzögerung zu geben, indem Sie die folgende Zeile hinzufügen. Dies unterstützt die bisherige Vermutung, dass der Körper nicht sofort seine richtige Breite kennen (wenn nicht anders angegeben):

<script> 

    [...] 

    e.width = 100*w + "px"; 
</script>

Auch wenn wir die Freiheit genommen haben wilde Vermutungen zu werfen, dies zu erklären, ich habe nicht wirklich einen Hinweis auf Was ist los.

Warum werden die Elemente nicht richtig platziert und warum funktionieren diese beiden Lösungen?

(Hinweis: Es ist auch möglich, dies zu beheben, indem die Leerzeichen des Körpers Einstellung mit e.whiteSpace = "nowrap"; nowrap, aber ich vermute, dies ist nicht das Gleiche wie die beiden anderen tut Anstatt zu schaffen. Platz für die Elemente innerhalb des Körpers, dies zwingt einfach die Elemente nebeneinander zu sein, obwohl es nicht genug Platz im Körper gibt.)

Quelle

2016-05-03 Gendarme

Sie sollten warten, bis das DOM verfügbar sein, bevor Sie Ihren Code ausführen, siehe hier: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it. Das ist möglicherweise der Grund, warum setTimeout funktioniert. Außerdem sollten Sie für Ihre verschiedenen Elemente separate Variablennamen vergeben.

Gibt es einen Grund, warum Sie Javascript und nicht CSS verwenden, um diese Aufgabe zu erfüllen? Ich schlage vor, geben Sie Ihre Elemente CSS-IDs also id = „beiseite“ und dann Ihre CSS-Stile:

html,body { 
    width: 100%; 
    height: 100%; 
} 
#aside { 
    display:inline-block; 
    position: relative; 
    float: left; 
    width: 14%; 
    height: 69%; 
    background: blue; 
} 
#main { 
    display:inline-block; 
    position: relative; 
    float: left; 
    width: 86%; 
    height: 31%; 
    background: azure; 
}

Quelle

2016-05-03 23:35:21 msmfsd

Die akzeptierte Antwort auf die Frage in Ihrem Link besagt, dass es gut genug ist, um die JavaScript am Ende der haben Körper, den ich habe. – Gendarme

Um Ihren zweiten Punkt zu beantworten, kann kein CSS, das mir bekannt ist, HTML genauso formatieren wie JavaScript in Bezug auf 'screen.width' und' screen.height'. % in CSS bezieht sich auf die Breite/Höhe des Webbrowsers, nicht auf den Bildschirm. – Gendarme

Die angenommene Antwort besagt auch, dass Sie Ihre js ausführen, nachdem das DOM bereit ist, indem Sie Ihren Code in eine selbstausführende Funktion einpacken oder Code wie jQuery verwenden, probieren Sie es aus und sehen Sie, wie es geht. – msmfsd

auf Körper Verzögerung oder angegebene Breite benötigt für eine korrekte

Antwort

Verwandte Themen