javascript getelementbyid ...如何“获取” “html”多变的

发布于 2024-10-16 03:36:30 字数 1298 浏览 6 评论 0原文

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

<body onLoad="allowscroll();">

您好，上面的代码适用于任何元素，例如将“html”替换为“wrapper”，但是如何编辑应用于html的css？基本上，由于溢出：隐藏在ie7中没有继承 - 这会导致大的空白右侧边距和水平滚动条（仅在ie7，ie 8兼容性中），我将css设置为

html {overflow-x:hidden;}

这是在不丢失必要功能的情况下修复它的唯一方法，例如，图形可见性溢出。

这一切都很好，但是，较低的屏幕分辨率需要水平滚动才能看到页面本身的所有内容，因此我尝试为这些用户恢复水平滚动条 - 并为发生这种情况的任何人恢复大的右边距例如 ie7 1024 x 768 - 我可以接受（除非有人碰巧有 superdupa 解决方案）。

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

所以上面的代码适用于编辑任何元素的 CSS，但不适用于 html 的 CSS。

我也尝试过：

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

并且

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

我真的很感激任何帮助，-如果它有助于查看解决方案，则适用的链接是： delight design，基本上，它是如何取出的：

html {overflow-x:hidden;}

在较低的屏幕分辨率下从 css 中...

非常

感谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北笙凉宸 2024-10-23 03:36:30

有很多不同的方法来获取 html 元素：

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

但老实说，一定有更好的方法。我现在没有时间追查这里到底发生了什么，但据我所知，将 position:relative 添加到任何需要溢出的地方可能会有所帮助。

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 原文