在 window 上加载 javascript 调整大小

Question

让我的不同部分有自己的高度，以便能够使它们相互重叠。 我让它工作了，但 javascript 仅在页面刷新时加载。

是否可以添加一些代码以便在 window 大小实时更改时更新我的代码？

而且，我知道我区分三个不同面板的方法是一种捷径。 是否可以编写代码以便它自己计算每个单元，如果我想添加部分，这会更容易。

let div = document.querySelector(".panel-01")
        var height = document.querySelector(':root');
        height.style.setProperty('--height', div.clientHeight + "px");          

let div2 = document.querySelector(".panel-02")
        var height = document.querySelector(':root');
        height.style.setProperty('--height-2', div2.clientHeight + "px");          

let div3 = document.querySelector(".panel-03")
        var height = document.querySelector(':root');
        height.style.setProperty('--height-3', div3.clientHeight + "px");

.panel-01 {
    top:calc(100vh - var(--height));
}

.panel-02 {
    top:calc(100vh - var(--height-2));
}

.pangel-03 {
    top:calc(100vh - var(--height-3));
}

Answer 1

您应该阅读一次响应式概念。 这个概念将永远对你有用。

但是，如果您想在调整 window 的大小时执行任何操作，那么此代码将为您派上用场。 通过这种方式，您可以将调整大小事件应用于 window。 每当调整 window 的大小时，它将运行给定的 function。

尝试调整 WINDOW 的大小并查看结果

 window.addEventListener('resize', function(event){ var newWidth = window.innerWidth; var newHeight = window.innerHeight; // Your code. // Exmple: document.getElementById("size").innerHTML = `newWidth: ${newWidth}, newHeight: ${newHeight}`; });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <p id="size"></p> <script src="script.js"></script> </body> </html>

在 window 上加载 javascript 调整大小

问题描述

1 个解决方案

解决方案1
4 已采纳 2022-09-12 14:28:00

在 window 上加载 javascript 调整大小

问题描述

1 个解决方案

解决方案1 4 已采纳 2022-09-12 14:28:00

解决方案1
4 已采纳 2022-09-12 14:28:00