文章/答案/技术大牛

发布

社区首页 >问答首页 >加载窗口大小调整的javascript

问加载窗口大小调整的javascript
EN

Stack Overflow用户

提问于 2022-09-12 13:54:36

回答 1查看 65关注 0票数 2

我的页面

给我的不同的部分，他们自己的高度，能够使他们互相重叠。我让它正常工作，但是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));
}

javascript

window-resize

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-12 14:28:00

您应该读一次关于响应性概念的文章。这个概念对你总是有用的。

但是，如果您想在调整窗口大小时执行任何操作，那么这段代码将为您提供方便。通过这种方式，您可以将调整大小事件应用于窗口。无论何时调整窗口的大小，它都会运行给定的函数。

尝试调整窗口的大小，并查看结果

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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73690456

复制

相似问题

问加载窗口大小调整的javascript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载窗口大小调整的javascriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载窗口大小调整的javascript
EN