我的頁面
讓我的不同部分有自己的高度，以便能夠使它們相互重疊。我讓它作業了，但是只有在頁面重繪 時才會加載 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));
}
uj5u.com熱心網友回復：
您應該閱讀一次回應式概念。這個概念將永遠對你有用。
但是，如果您想在調整視窗大小時執行任何操作，那么這段代碼會派上用場。通過這種方式，您可以將調整大小事件應用到視窗。每當調整視窗大小時，它將運行給定的函式。
嘗試調整視窗大小并查看結果
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506178.html
標籤：javascript 窗口调整大小