nOjan nOjan - 3 months ago 8x
HTML Question

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) {
if (width >= 1152) {
window.onresize = function() {
window.onload = function() {

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.


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.