views:

53

answers:

2

How can I change the dimensions (width, height) of the body element after the content has been loaded?

Restrictions:

  • Only targeting WebKit browsers
  • Can't use frameworks like JQuery
  • Can't make changes to the original HTML file; only execute JavaScript after the content has been loaded.
+2  A: 

You may use the onload JS event in your <body> tag. For example: <body onload="ResizeBody();">. And the function may look like this:

function ResizeBody() {
    document.body.style.width=your_width;
    document.body.style.height=your_height;
}

Now it works, sorry for the previous mistake (missing style in the tree).

rhino
The question says he can't change the HTML file :)
Nick Craver
The function executes, but the page remains the same no matter what values I use.
hgpc
@Nick Craver I can execute javascript after the page has been loaded, though. Will clarify.
hgpc
Aaaaargh! I am so sorry! I forgot about the `style` child :) Fixed now. Now my code works (tested).
rhino
+1 for testing your answer. :)
hgpc
+2  A: 
window.addEventListener("load", function() {
  document.body.style.width = '600px';
}, false);
glebm
Works like a charm. Thanks!
hgpc