简体   繁体   English

javascript getelementbyid…如何“获取”“ html”变量

[英]javascript getelementbyid … how to 'get' the “html” variable

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, eg subbing "html" for "wrapper", but how is it possible to edit the css applied to html? 嗨,上面的代码适用于任何元素,例如,将“ html”替换为“ wrapper”,但是如何编辑应用于HTML的CSS? 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 基本上,由于overflow:在ie7中隐藏而不继承-这会导致较大的右侧空白和水平滚动条(仅在ie7中,即8兼容),因此我将css设置为

html {overflow-x:hidden;}

this is the only way to fix it without losing necessary functionality, eg 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). 这一切都很好,但是,较低的屏幕分辨率需要水平滚动才能看到页面的全部内容,因此我尝试为这些用户恢复水平滚动条,并为发生这种情况的所有人恢复较大的页边距例如,ie7 1024 x 768-我可以忍受(除非有人碰巧拥有superdupa解决方案)。

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. 因此,以上代码可用于编辑任何元素的CSS,但不适用于html的CSS。

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... 在较低的屏幕分辨率下从css ...

many thanks 非常感谢

Will

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

Note I just edited the answer as getElementsByTagName returns an array. 注意我刚刚编辑了答案,因为getElementsByTagName返回一个数组。 You want the first element in that array. 您需要该数组中的第一个元素。

Just use the documentElement : 只需使用documentElement

document.documentElement

It has full browser suport . 它具有完整的浏览器支持

There are a bunch of different ways to get the html element: 有很多不同的方法来获取html元素:

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. 我现在没有时间追查这里到底发生了什么,但是据我所知 ,添加position:relative对于任何需要的溢出可能会有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM