cms-blog.ru

Блог о WEB-технологиях

Месяц: Октябрь 2021

JavaScript — события загрузки и изменения размера окна

Опубликовано Администратор

Пример пересчета размеров элементов при разных размерах окна (разных разрешений экрана)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function resize_info(){
let heightHeaderTop = document.querySelector(".header-top").offsetHeight;
let heightHeader = document.querySelector("header").offsetHeight;
let heightHeaderAll = heightHeader + heightHeaderTop;
let heightHeaderAll20 = heightHeader + heightHeaderTop + 20;
document.querySelector("Header").style.top = heightHeaderTop + "px";
document.querySelector(".blank-bl").style.height = heightHeaderAll20 + "px";
document.querySelector("#site-menu").style.top = heightHeaderAll + "px";
console.log( heightHeader );
};
document.addEventListener("DOMContentLoaded", function(event)
{
window.onload = function() {
resize_info();
};
window.onresize = function() {
resize_info();
};
});