codepen & js demos Mutation Observer & customize resize event listener & demo



codepen & js demos

Mutation Observer & customize resize event listener & demo

​​https://codepen.io/webgeeker/pen/YjrZgg​​

​​https://codepen.io/dashboard?type=search&opts_itemType=pen&opts_searchTerm=js&opts_order=newest&opts_depth=everything&opts_showForks=false&displayType=list&previewType=iframe&page=0​​


Mutation Observer

​​https://javascript.ruanyifeng.com/dom/mutationobserver.html​​

​​https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver​​

// todo


resize & response width

​​https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event​​

codepen & js demos_codepen


const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

// OR

window.addEventListener('resize', reportWindowSize);