Как определить, когда ширина элемента div изменяется (не размер окна) в JS?

Question

У меня есть сценарий, если ширина элемента div изменяется, мне нужно выполнить некоторые функции. Так что есть ли способ обнаружить изменения ширины элемента (не изменение размера окна).

Например, у меня есть элемент DIV с шириной 300px, и мое окно составляет 800px при рендеринге страницы. Когда я запускаю функцию, я изменяю ширину элемента div на 400px, поэтому для этого изменения ширины по умолчанию мне нужно выполнить некоторые действия, так есть ли какой-нибудь способ обнаружить в чистом javascript изменение размера элемента?

Answer 1

Вы можете использовать экземпляр MutationObserver и искать любое изменение атрибута style

var element = document.getElementById('d');

var observer = new MutationObserver(function() {
   console.log("You changed the style") 
});


observer.observe(element, { attributeFilter: ['style'] });


setTimeout(()=>{
   element.style.width = '400px';
}, 2000)

#d {
   width: 300px;
   height: 300px;
   background: #9bc;
}

<div id="d"></div>

Если вместо этого вы примените class с заданной шириной, тогда прослушайте любое изменение класса в attributeFilter.

Answer 2

Вы можете использовать MutationObserver . Рассмотрим следующий пример, который сообщит вам, когда тег <p> изменяется вручную или когда вы нажимаете кнопку «Изменить размер». Любая мутация атрибута вызовет наблюдателя, поэтому вам нужно будет отфильтровать то, что вы хотите.

const p = document.querySelector("p");
const button = document.querySelector("button");

const p$ = new MutationObserver((mutationList, observer) => {
  for (mutation of mutationList) {
    console.log(mutation);
  }
});

p$.observe(p, {
  attributes: true,
  childList: false,
  subtree: false
});

button.addEventListener("click", () => {
  p.style.width = "100px";
});

.wrapper {
  width: 400px;
}

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

<div class="wrapper">
  <p class="resizable">Hello</p>
  <button>Resize</button>
</div>

Answer 3

Идеальным решением было бы ResizeObserver, но на данный момент у него не слишком хорошая поддержка кросс-браузеров .

Однако, он будет работать в новейших Chrome, FF и некоторых других:

const elem = document.querySelector('#sizeobserver')

new ResizeObserver(console.log).observe(elem)

#sizeobserver {
   resize: both;
   overflow: hidden;
   border: 1px solid black;
}

<div id="sizeobserver">Resize me!</div>

Чтобы игнорировать изменения высоты, вы можете проверить свойство width contentRect. Теперь регистрируются только изменения ширины:

const elem = document.querySelector('#sizeobserver')
{ // <--Just to encapsulate prevWidth
  let prevWidth
  new ResizeObserver(changes => {
    for(const change of changes){
      if(change.contentRect.width === prevWidth) return
      prevWidth = change.contentRect.width

      //Code here:
      console.log(change)
    }
  }).observe(elem)
}

#sizeobserver {
   resize: both;
   overflow: hidden;
   border: 1px solid black;
}

<div id="sizeobserver">Resize me!</div>