在窗口调整大小时加载 javascript

发布于09月12日

给我的不同部分赋予自己的高度，以便能够使它们相互重叠.我让它正常工作，但仅当页面刷新时才加载该脚本.

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

而且，我理解我区分三个不同小组的方法是一条捷径.有没有可能写代码，让它自己计算每个单位，这将使它更容易，如果我想要添加部分.

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));
}

<!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>

在窗口调整大小时加载 javascript

推荐答案

Javascript相关问答推荐

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

从PWA中的内部存储读取文件

yarn安装一个本地npm包，以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

如何用显示网格平滑地将元素从一个地方移动到另一个地方？

未捕获错误：在注销后重定向到/login页面时找不到匹配的路由

在nextjs服务器端api调用中传递认证凭证

如何从隐藏/显示中删除其中一个点击？

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

如何从HTML对话框中检索单选项组的值？

使用类型：assets资源 /资源&时，webpack的配置对象&无效

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

Jexl to LowerCase()和Replace()

JAVASCRIPT SWITCH CASE语句：当表达式为'；ALL'；

使用API调用的VUE 3键盘输入同步问题

使用createBrowserRoutVS BrowserRouter的Reaction路由

react 路由DOM有条件地呈现元素

Chart.js Hover线条在鼠标离开时不会消失

MAT-TREE更多文本边框对齐问题

如果未定义，如何添加全局变量

使用JAVASCRIPT-使用If和Else If多次判断条件-使用JAVASRIPT对象及其属性