Как отследить размер блока при загрузке страницы?

Question

[Айнур Ярулин]

Здравствуйте, вообщем есть функция, которая вешает класс portrait когда высота
элемента больше его длинны и удаляет его, когда всё наоборот.

const элемент = document.querySelector('.элемент')
window.onresize = () => {
	if (элемент.offsetHeight >= элемент.offsetWidth) {
		элемент.classList.add('portrait')
	} else элемент.classList.remove('portrait')
}

Суть в том, что когда у элемента есть класс portrait, то срабатывают всякие CSS стили,
но проблема заключается в том, что функция работает только если самостоятельно менять
размеры страницы, НО она не срабатывает если обновить страницу или нажать на кнопку "оконный режим".
Как можно улучшить функцию, чтобы исправить эти косяки?

Comments

[Gary_Ihar]

Этот же код(что внутри ресайза) скопируйте за пределы window.onresize. От копирования одинаковых строк кода лучше избавиться с помощью функции

[Айнур Ярулин]

Gary_Ihar, пробовал, но класс portrait всё равно не добавляется

[Gary_Ihar]

squadbrodyaga,

const elem = document.querySelector('.elem')
foo()  
window.addEventListener('resize',foo)
function foo(){
    if (elem.offsetHeight >= elem.offsetWidth) {
        elem.classList.add('portrait')
    } else { elem.classList.remove('portrait') }
}

Это твой код, у меня он работает

[Айнур Ярулин]

Gary_Ihar, ничего не понимаю, почему у меня не работает, что за магия...

[Айнур Ярулин]

Gary_Ihar, решил проблему, просто написал этот код в HTML файле

Answer 1

[Айнур Ярулин]

Вообщем функция НЕ работала, потому что я писал её в JS файле который был подключён с атрибутом defer.
Я написал функцию в HTML файле и всё заработало.