2009-04-28 6 views
2

eine HTML-Seite Angenommen:Wie nur mit der Seitenhöhe von X Pixeln erhöhen Javascript

<html> 
    <body> 
    .. html content (outside of our control) .. 
    .. javascript block .. 
    .. some more html content (outside of our control) .. 
    </body> 
</html> 

Nehmen wir weiter an, dass der einzige Teil der HTML-Seite, die wir ein Javascript-Block zu steuern, sind in der Lage ist, in die Mitte der Seite.

Wie verwende ich den JavaScript-Block, um die gesamte Seitenhöhe um 150 Pixel zu erhöhen, indem Sie den unteren Rand der Seite "auffüllen"?

Wenn ich die HTML eine einfache Lösung wäre verändern könnte:

<html> 
    <body> 
    .. html content (outside of our control) .. 
    .. javascript block .. 
    .. some more html content (outside of our control) .. 
    <div style="height: 150px; clear: both;"></div> 
    </body> 
</html> 

Aber wie erreiche ich dies nur durch den JavaScript-Block mit?

Die ideale Lösung sollte Cross-Browser-kompatibel und 100% Inline sein (dh keine JavaScript-Bibliothek verwenden).

Update # 1: Der JavaScript-Block hat Zugriff auf das gesamte DOM der Seite.

Update # 2: Die Gesamtlänge der Seite (vor der Änderung des DOM) variiert.

Update # 3: Angenommen, dass keine Javascript-Bibliothek (wie die sonst ausgezeichnete jQuery) verwendet werden kann.

+0

Geht Ihr Javascript in einem iframe, oder hätten Sie Zugriff auf die gesamte Seite? – jacobangel

Antwort

6

Aktualisiert Code:

var space = document.createElement('div'); 
space.style.height = "150px"; 
space.style.clear = "both"; 
document.getElementsByTagName("body")[0].appendChild(space); 
+0

Danke - Ich habe die Frage geklärt. Siehe Update # 2. – knorv

+0

Dies sollte funktionieren, egal wie lang die Seite ist. Ich habe keine Stimmen mehr, oder ich stimme ab. Ich wollte im Grunde dasselbe machen. – zombat

+0

der Originalcode produzierte nur eine absolute Höhe, das ist die aktualisierte Version – cobbal

1

Können Sie DOM-Elemente über Javascript generieren und einfach das div nach unten hinzufügen?

Ich würde für Cobbal wählen Wenn ich einen rep .. heh hatte. .

0

$ ('body') anhängen ($ ('< div style = "height: 150px; clear: both;" > </div >'));

vielleicht

+0

@PaulG Warum hast du das bearbeitet? Es funktioniert nicht mit Ihrer Bearbeitung. –

+0

Ah Entschuldigung John, sieht aus wie die Codeformatierung Escape Chars hinzugefügt, die ich nicht bemerkt habe. Das tut mir leid. Abgesehen davon, dass diese Antwort als "Post mit niedriger Qualität" im Review-Bereich erschien, könnte es sich lohnen, wenn möglich darüber zu expandieren. – PaulG

Verwandte Themen