<h3>css resize事件</h3>
<div class="box" onresize="fn(event)"></div>


.box{
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  padding: 10px;
  min-width: 100px;
  min-height: 100px;
  width:200px;
  height:200px;
  background: #fff;
  background-clip: content-box;
  box-shadow: inset 0 0 0 10px #ddd;
  overflow: hidden;
  animation: resize .1s infinite paused forwards;/**触发频率**/
  resize: both;
}

.box:active{
    animation-play-state:running;
}

@keyframes resize{
    to {
       opacity: 1;
    }
}

function fn(ev){
  var w = ev.target.clientWidth;
  var h = ev.target.clientHeight;
  ev.target.innerText = (w + 'x' + h);
}



document.querySelectorAll('.box').forEach(function(el){
  el.addEventListener('animationiteration',function(){
    // 创建并分发事件
    var event = new CustomEvent("resize");
    el.dispatchEvent(event);
    // eval(''+this.getAttribute('onresize')+'');
    // if(el['onresize']){
    //    el['onresize'](event);
    // }
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.