JS. Как получить размеры элемента для разных размеров экрана при событии load?

Question

[Никита]

Есть много элементов <p>, у которых 2 брейкпоинта в CSS. На каждом брейкпоинте изменяется font-size.

p {
  width: fit-content;
  font-size: 30px;
 }

@media (max-width: 1439px) {
   p {
      font-size: 24px; 
  } 
}

@media (max-width: 1023px) {
   p {
      font-size: 20px; 
   } 
}

Соответственно каждый элемент меняет свой размер на заданных медиавыражениях.

Вопрос в том как мне сразу получить размеры элемента в JS по событию window.onload и при данных брейкпоинтах, не прибегая к событию resize? Другими словами можно ли как-то симулировать отрисовку в заданных разрешениях и вернуть значения? Мне всего лишь необходимо получить геометрию элемента при значении этих трех разрешений в CSS. Ведь я точно знаю что элемент будет меняться именно на этих точках слома.

Представим ситуацию что запускается скрипт при разрешении 1920px, срабатывает событие load я получаю значения ширины элемента <p> для разрешения >1440, а также для разрешений 1440< и 1024< не прибегая к событию resize. Тот же самый эффект необходим если загружаюсь с девайса с меньшим разрешением, например 1200px.

Можно ли как-то подсказать JS'у что необходимо получить ширину именно для конкретного разрешения? Нужны ли дополнительные библиотеки, плагины?

Comments

[Дмитрий Беляев]

А нельзя быстро отрендерить в нужном месте p с таким же контентом, поменять ему font-size и взять размеры?
А после удалить.

Answer 1

[Brendan Castaneda]

Вы определяете ширину окна браузера а затем отталкиваясь этих значений меняете стили.

Это просто кусок кода, как пример.

let userScreen = document.body.clientWidth; // Ширина окна браузера.
let backgroundHat = document.querySelector(".background-hat");
let backHat = document.querySelector(".background-hat");

function mine() {
    // Your code...
    // Если размер окна браузера меньше или равен 599px 
    if (userScreen <= 599) {
        backgroundHat.style.zIndex = 5;
        backgroundHat.style.backgroundColor = "rgba(255,255,255,0.9)";
        backHat.classList.add("background_hat-true-forma");
    }
}

Comments

[Никита]

Мне не нужно менять стили. Мне нужно от элемента (с уже заранее заданными стилями) получить его геометрию для трех разных разрешений экрана не прибегая к ресайзу, то есть при загрузке страницы.

[Brendan Castaneda]

Никита,

Вопрос в том как мне сразу получить размеры элемента в JS по событию window.onload

Но вы уже сделали медиа запросы и вы уже знаете размер элемента, при том или ином медиа запросе.
И исходя из ширины экрана как я описал в примере выше вы можете делать с ними то, что вам нужно.
Я больше ничего не могу сказать... Сложно понять что вы пытаетесь там сделать.