Наблюдайте неявные изменения размера на HTMLElements - PullRequest
Новая
       23

Наблюдайте неявные изменения размера на HTMLElements

0 голосов
/ 08 октября 2018

Хотя MutationObserver позволяет отслеживать явные изменения размера атрибута HTMLElement, он, похоже, не имеет способа / конфигурации, позволяющего мне отслеживать неявные изменения его размера, которые вычисляются браузером.

Вот пример: 

const observer = new MutationObserver(changes => {
  console.log('changed')
})

observer.observe(document.querySelector('#bar'), {
  attributes: true
})

document.querySelector('#foo').style.width = '200px'
.container {
  display: flex;
  align-items: stretch;
}

.child {
  width: 100px;
  height: 100px;
  margin: 0 2px;
  background: magenta;
}
<div class="container">
  <div class="child" id="foo"></div>
  <div class="child" id="bar"></div>
</div>

В приведенном выше примере я изменяю размер #foo, наблюдая за #bar.#bar get сжимается на #foo (ширина изменяется неявно, поскольку браузер вычисляет его ширину, а не я явно указываю его).

Как я могу обнаружить такие неявные изменения размера?

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

... Однако события изменения размера запускаются только (отправляются) объекту окна :: MDN

Новый стандарт: * Resize Observer 

new ResizeObserver(()=>console.log('bar dimension changed :: RO!')).observe(bar);

Но пока это только для позднего Chrome, я предлагаю некоторую библиотеку, например: CSS-Element-Queries 

<script src="css-element-queries-1.0.0/src/ResizeSensor.js"></script>
<script src="css-element-queries-1.0.0/src/ElementQueries.js"></script>
new ResizeSensor(bar, function(){ 
    console.log('bar dimension changed :: CSS-Element-Queries');
});
0 голосов
/ 08 октября 2018 

Hi just take the javascript part to the end of the body

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: stretch;
            
        }

        .child {
            width: 200px;
            height: 100px;
            margin: 0 2px;
            background: magenta;
        }
       
    </style>
   
</head>

<body onload="">

    <div class="container">
        <div class="child" id="foo"></div>
        <div class="child" id="bar"></div>
    </div>
    <script>
        const observer = new MutationObserver(changes => {
            console.log('changed')
        });

        observer.observe(document.querySelector('#bar'), {
            attributes: true
        });

        document.querySelector('#foo').style.width = '400px'
    </script>
</body>
</html>
...