为我的不同部分提供自己的高度，以便能够使它们相互重叠。我可以正常工作，但 javascript 仅在页面刷新时加载。
是否可以添加一些代码，以便我的代码在窗口大小实时变化时更新？
而且，我知道我区分三个不同面板的方式是一个快捷方式。是否可以编写代码，以便它自己计算每个单元，这样如果我想添加部分会更容易。
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));
}
最佳答案
您应该阅读 responsive概念一次。这个概念永远对您有用。
但是如果您想在调整窗口大小时执行任何操作，那么这段代码将会派上用场。 这样你就可以应用resize event到 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>关于javascript - 在调整窗口大小时加载 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73690456/