ResizeObserver与元素的显示和隐藏检测实例页面

回到相关文章 »

效果：

代码：

CSS代码：

button + img {
    display: none;
    margin-top: 10px;
}
.active + img {
    display: block;
}

HTML代码：

<button id="button">点击我</button>
<img id="img" src="./mm.jpg" width="256">
<p id="result" class="remind"></p>

JS代码：

var objResizeObserver = new ResizeObserver(function (entries) {
    if (window.getComputedStyle(img).display == 'none') {
        result.innerHTML += '图片隐藏了<br>';
    } else {
        result.innerHTML += '图片显示了<br>';
    }
});
// 观察图片元素
objResizeObserver.observe(img);

// 按钮行为
button.addEventListener('click', function () {
    this.classList.toggle('active');    
});