Question

HTML：

<div id="at" style="width:100%;background:red">
This is a div, you can click on me or resize me. 
</div>

JavaScript的：

$('#at').resize(function(){alert(1)})
$('#at').click(function(){alert(2)})

Answer 1

我认为您需要参考此链接

http://marcj.github.io/css-element-queries/

我刚刚检查了这个js这对我来说是下载这个文件并检查它，希望这会对你有所帮助

var element = document.getElementById('at');
new ResizeSensor(element, function() {
   console.log('Changed to ' + element.clientWidth);
});

Answer 2

如果元素的宽度发生了变化，可能会使用一个检查onresize的小函数。调整浏览器大小并检查控制台日志结果。

$(window).resize(function(){

  var obj = $('#at')[0];
  if(detectResize(obj)) console.log('resize detected');

});


function detectResize(getObject){
  var getWidth = getObject.getBoundingClientRect().width;
  if(getObject.currentWidth===getWidth){
    return false;
   } else {
     getObject.currentWidth = getWidth;
     return true;
   }
}

#at{
  width:100%;
  max-width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at" style="background:red">
This is a div, you can click on me or resize me. 
</div>

为什么这个调整大小处理程序不起作用？

2 个答案: