Как отслеживать ширину окна через js?

Question

[zhurawlenokk]

Приветствую всех. Такой вопрос, как сделать "резиновость(отзывчивость)" через js? Нужно максимально просто, т.к я только начинаю учить сей язык...
ТЗ такое "Вёрстка должна быть отзывчивой (Responsive), минимальная ширина обёрнутого содержимого
630px, максимальная — 1270px. Проверяться будет именно изменение ширины обёрнутого
шаблона, а не изменение ширины окна браузера, т. е. если, например, ширина окна браузера
1920, а ширина обёрнутого содержимого будет ограничена 630-ю пикселями, то шаблон должен
соответствовать макету 630.psd."

UPD: так как у меня уже было сверстано через медиа-запрос, было решено если ширина меньше 1270 - добавлять класс .mobile. В связи с этим вопрос, как выбрать все элементы внутри контейнера? Мой чудо-код выдает ошибку "Uncaught TypeError: Cannot read property 'add' of undefined at addClass"

const container = document.querySelector('.container'),
All = document.body.querySelectorAll('*');

console.log(All);

function addClass() {
if (container.offsetWidth < 1270) {

container.classList.add('mobile'),

console.log('done');

} else if (container.classList.contains('mobile')) {
console.log('true'),

All.classList.add('mobile'); (58 строка)

console.log('added');

};

};

let timerId = setInterval(() => addClass(), 500);

addClass();

Comments

[Gary_Ihar]

Я не супер верстак, но делать вёрстку отзывчивой через JS не очень идея

[zhurawlenokk]

Gary_Ihar,
штука еще в том, что нужно делать без медиа-запросов. Я пока не знаю, как от них отказаться...

[Gary_Ihar]

zhurawlenokk, ну вот изучай тогда тут инфу, там все будет

тык1
тык2

[Антон]

zhurawlenokk, что за дебильные требования? Вам нужно завентить саморезы для того и того, но вам запрещено пользовать шуруповерт, отвертку и другие средства которые СПЕЦИАЛЬНО для этого и созданы.

Построил полковник солдат на плацу:
- - Задача такая, все взяли в руки ломы и начали подметать плац!

Голос из строя:
- - Товарищ полковник, а может взять веники, так быстрее будет и чище?
Полковник:
- - А мне не надо чтоб было чисто, мне нужно чтобы вы за***!

[zhurawlenokk]

Антон, такова вот жизнь... Это, к слову, тестовое задание на верстку... Зачем-то они проверяют знание(умение) того, что в практике никто никогда не будет использовать....

[Gary_Ihar]

zhurawlenokk, жесть конечно. По решению: я бы повесил событие ресайз , читал бы ширину необходимых вещей(окна, объектов, чего угодно) и на определенных моментах вешал бы нужные классы.

[Gary_Ihar]

Но на работе за такое бы меня порешали

[Ankhena]

zhurawlenokk,

Это, к слову, тестовое задание на верстку...

А вы уверены, что хотите с ними работать?

Я, если бы решила вообще что-то делать, сделала бы через media и сказала бы, что через js это делают только идиоты. Но показала бы решение другой задачи, для которой нужно отслеживать ширину на js.
Если бы они после этого сказали "о, привет, адекватный человек, которые не повелся на наши провокации", то подумала, нужны ли мне такие провокаторы.
А если бы послали, то решила, что и славненько.

Answer 1

[Виталий Коваль]

Если нужна ширина и высота окна браузера то: window.innerWidth и window.innerHeight

Если ширина блока то:

let elNode = document.querySelector('.js-question-text');
let elWidth = elNode .getBoundingClientRect().width;
console.log(elNode.getBoundingClientRect());


function resizeFunc(){
//функция
}

//Отслеживание изменения размера окна. Даймаут для отложенного выполнения на 0.5 секунды чтобы не лагало
let timer = setTimeout(() => {}, 10);
window.addEventListener('resize', (e) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    resizeFunc();//Выполняемая функция
  }, 500);
});

//Запуск функции при загрузке страницы
document.addEventListener('DOMContentLoaded', resizeFunc);