Каков синтаксис события изменения
- ширины окна и
- высоты окна?
- в javascript;
- в jquery? По изменению ширины и высоты окна должно происходить пропорциональное изменения ширины и высоты блока относительно всего окна (см. Синтаксис задания высоты блока).
Каков синтаксис события изменения
Событие изменения окна:
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>