gpt4 book ai didi

javascript - 如何创建页面大小的 div?

转载 作者:搜寻专家 更新时间:2023-10-31 21:53:07 25 4
gpt4 key购买 nike

请注意,我不是询问如何制作 div存在大量问题的“窗口”或“视口(viewport)”的大小。

我有一个具有一定高度和宽度的网页,我想添加一个空的顶级 div(即,不包含页面其余部分的 div),其大小正好等于页面的高度和宽度。实际上,我还希望它至少是视口(viewport)的大小。

我知道我可以用 JavaScript 一次性计算高度和宽度:

var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);

但是这个值可以根据图像加载、AJAX 或页面中发生的任何其他动态内容而改变。我想要一些方法来将 div 的大小锁定在整个页面大小,以便它动态地按需调整大小。

我试过类似下面的方法:

function resetFakeBg() {
// Need to reset the fake background to notice if the page shrank.
fakeBg.style.height = 0;
fakeBg.style.width = 0;
// Get the full page size.
var pageHeight = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var pageWidth = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
// Reset the fake background to the full page size.
fakeBg.style.height = pageHeight + 'px';
fakeBg.style.width = pageWidth + 'px';
}

// Create the fake background element.
fakeBg = setFakeBgStyle(document.createElement('div'));
document.body.appendChild(fakeBg);
// Keep resizing the fake background every second.
size_checker_interval = setInterval(resetFakeBg, 1000);

限制

这是一个 Chrome 扩展程序,我想将我对页面的修改限制为添加这个 div .这意味着添加CSS来修改html的高度和宽度。和/或 body标签是不可取的,因为它可能会对页面其余部分的呈现方式产生副作用。

此外,我不想将现有页面包装在 div 中因为这有可能破坏某些网站。想象一下,例如,一个使用 CSS 选择器设置样式的网站 body > div .我希望我的扩展尽可能少地破坏网站。

为什么,为什么我需要这样做?

因为有些人喜欢把他们的答案作为人质,直到他们对我有一个真正好的理由™想要这样做感到满意为止:

这是一个以可访问性为中心的 Chrome 扩展程序,它在整个页面上应用 CSS 过滤器。最新版本的 Chrome (>= 45) 不会将 CSS 过滤器应用于 <html> 上指定的背景或 <body>标签。因此,我选择通过将页面背景复制到带有非常负面的 z-index 的 div 来解决此限制。值,以便它可以受到页面范围的 CSS 过滤器的影响。为了使该策略起作用,div 需要准确模仿页面背景向用户显示的方式——与文档的大小完全相同(不能更大)并且至少填满视口(viewport)。

最佳答案

setInterval() 是您最好的 friend ,在这种情况下您想要一个元素始终被异步指定为可以通过用户输入和 DOM 树更改动态更改的内容。这就是我称之为“页面嗅探器”的东西,并且可以说,如果您使用多种语言(PHP、XML、JavaScript)工作,它比 $(document).ready 效果更好。

Working Example

关于javascript - 如何创建页面大小的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31773973/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com