javascript getelementbyid ... how to 'get' the "html" variable

662 views Asked by At
function allowscroll()
{
if (screen.width<1200){document.getElementById('html').style.cssText='overflow-x: scroll !important;';};
}

<body onLoad="allowscroll();">

hi there, the above code works for any element, e.g. subbing "html" for "wrapper", but how is it possible to edit the css applied to html? Basically, because of overflow:hidden not inheriting in ie7 - which causes a big empty righthand margin and horizontal scrollbar (only in ie7, ie 8 compatibilty), ive set the css to

html {overflow-x:hidden;}

this is the only way to fix it without losing necessary functionality, e.g. overflowed graphics visibilty.

and this is all well and good, however, lower screen resolutions need the horizontal scroll just to see all of the page itself, so I'm attempting to restore the horizontal scrollbar for those users - and restore the big right margin for anyone who happens to be, for example ie7 1024 by 768 - I can live with that (unless anyone happens to have a superdupa solution).

document.getElementById('html').style.cssText='overflow-x: scroll !important;';

So the above code works for editing the CSS of any element, but not the CSS of the html.

I've also tried:

function allowscroll()
{
if (screen.width<1200){document.getElementByName('html').style.cssText='overflow-x: scroll !important;';};
}

and

function allowscroll()
{
if (screen.width<1200){window.style.cssText='overflow-x: scroll !important;';};
}

I would really appreciate any help, - if it helps in seeing the solution, the link where this applies is: delight design, basically, its how to take out:

html {overflow-x:hidden;}

from the css when in lower screen resolutions...

many thanks

Will

3

There are 3 answers

6
sdleihssirhc On BEST ANSWER

There are a bunch of different ways to get the html element:

document.documentElement
document.getElementsByTagName('html')[0]
document.body.parentNode

But in all honesty, there must be a better way. I don't have time right now to track down what exactly happened here, but from what I can tell, adding position:relative to whatever needs the overflow might help.

0
John Hartsock On

Try document.getElementsByTagName("html")[0]

Note I just edited the answer as getElementsByTagName returns an array. You want the first element in that array.

2
user113716 On

Just use the documentElement:

document.documentElement

It has full browser suport.