CODEWITHSUNDEEP
javascripthtmldom
Nojan
Nojan

Reputation: 913

Changing body tag style through JavaScript

I'm trying to write a script to change the width of the page, considering user's client width. It's something like this:

function adjustWidth() { 
    width = 0;
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } else if (document.body) {
        width = document.body.clientWidth;
    }
    if (width < 1152) {
        document.getElementsByTagName("body").style.width="950px";
    }
    if (width >= 1152) {
        document.getElementsByTagName("body").style.width="1075px";
    }
}
window.onresize = function() {
    adjustWidth();
};
window.onload = function() {
    adjustWidth();
};

With this script I get an error from Firebug:

document.getElementsByTagName("body").style is undefined

Now my question is, how can i access the style of body? Because in the css sheet its selector and width property are defined.

Upvotes: 21

Views: 65548

Answers (6)

gaspar
gaspar

Reputation: 1068

As noted in comments (but strangely still missing among the answers), it should actually be document.body.style. For example, document.body.style.backgroundColor = "#3f3f3f";

Upvotes: 1

shannon.stewart
shannon.stewart

Reputation: 1014

I believe what you get back from document.getElementsByTagName("body") is HTMLCollection. You should be able to use document.getElementsByTagName("body")[0].style to get what you want.

Upvotes: 3

Naing Min Khant
Naing Min Khant

Reputation: 151

document.getElementsByTagName('body')[0].style = 'your code';

Example:

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';

Upvotes: 11

voodoo417
voodoo417

Reputation: 12101

document.getElementsByTagName("body")[0].style

Upvotes: 13

Snow Blind
Snow Blind

Reputation: 1164

getElementsByTagName returns an array of nodes so you must use [] to access elements.

Try document.getElementsByTagName("body")[0].style

Upvotes: 4

Pointy
Pointy

Reputation: 413720

That function returns a list of nodes, even though there's only one <body>.

document.getElementsByTagName("body")[0].style = ...

Now, that said, you may want to look into doing this with CSS instead of JavaScript. With CSS media queries, you make such adjustments:

@media screen and (max-width: 1151px) {
  body { width: 950px; }
}
@media screen and (min-width: 1152px) {
  body { width: 1075px; }
}

Media queries work in IE9 and pretty much all other modern browsers. For IE8 you can fall back to JavaScript or just let the body be 100% of the viewport width or something.

Upvotes: 38

Related Questions