1

Каков синтаксис события изменения

  1. ширины окна и
  2. высоты окна?
  3. в javascript;
  4. в jquery? По изменению ширины и высоты окна должно происходить пропорциональное изменения ширины и высоты блока относительно всего окна (см. Синтаксис задания высоты блока).
3
  • есть одно событие - изменение размера. а пропорциональные размеры можно задать с помощью процентов в стилях
    – teran
    Commented 15 апр. 2021 в 13:48
  • @teran можно пример кода, а то на словах не понятно (я новичок).
    – itspec891
    Commented 15 апр. 2021 в 13:51
  • @itspec891 jquery не советую изучать, только если вы хотите получать мало деняк Commented 15 апр. 2021 в 15:10

1 ответ 1

3

Событие изменения окна:

window.addEventListener('resize', (e) => {
  console.log(e);
});

Изменение ширины и высоты элементов в зависимости от ширины и высоты окна браузера на JS:

const block = document.querySelector('.block');
resizeWindow(block);

window.addEventListener('resize', (e) => {
  resizeWindow(block);
});

function resizeWindow(block) {
  
  block.style.width = `${window.innerWidth / 3}px`;
  block.style.height = `${window.innerHeight / 3}px`;
  block.innerHTML = `
  <p>window.innerWidth: ${window.innerWidth}</p>
  <p>window.innerHeight: ${window.innerHeight}</p>
  `;
}
.block {
  background: black;
  color: white;
}
<div class="block"></div>

Событие изменения размеров элемента:

const widthDom = document.querySelector('#width');
const heightDom = document.querySelector('#height');
const textboxDom = document.querySelector('#textbox');

function outputsize() {
 widthDom.value = textboxDom.offsetWidth;
 heightDom.value = textboxDom.offsetHeight;
}
outputsize();

new ResizeObserver(outputsize).observe(textboxDom);
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Отресайзь меня полностью</textarea><br>

Задание высоты и ширины блока от ширины и высоты окна браузера на CSS:

body {
  margin: 0;
}

.block {
  background-color: black;
  color: white;
  
  width: 50vw;
  height: 50vh;
}
<div class="block"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.