如何检测DIV的尺寸变化？

3 月，跳不动了？>>>

我有以下示例html，有一个DIV，其宽度为100％。它包含一些元素。在执行窗口调整大小时，内部元素可能会重新放置，并且div的尺寸可能会更改。我问是否有可能挂钩div的尺寸更改事件？以及如何做到这一点？我目前将回调函数绑定到目标DIV上的jQuery resize事件，但是，没有控制台日志输出，请参见以下内容：

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

#1楼

有一种非常有效的方法来确定元素的大小是否已更改。

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

该库具有ResizeSensor类，可用于调整大小检测。
它使用基于事件的方法，因此该死的速度很快，并且不会浪费CPU时间。

例：

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

请不要使用jQuery onresize插件，因为它使用setTimeout()循环来检查更改。
这是缓慢且不够精确的 。

披露：我直接与此图书馆有联系。

#2楼

规范中仅存在Window.onResize ，但是您始终可以利用IFrame在DIV中生成新的Window对象。

请检查此答案。有一个新的小jquery插件，可移植且易于使用。您始终可以检查源代码以了解其完成方式。

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}

#3楼

我以为无法完成，但是后来我想到了，您可以通过style =“ resize：both;”手动调整div的大小。为了做到这一点，您必须单击它，因此添加了一个onclick函数来检查元素的高度和宽度，并且它可以正常工作。仅使用5行纯JavaScript（确保它可能更短） http://codepen.io/anon/pen/eNyyVN

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>


<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>

#4楼

最好的解决方案是使用所谓的元素查询 。但是，它们不是标准的，没有规范-如果您想这样做，唯一的选择是使用一种可用的polyfills /库。

元素查询背后的想法是允许页面上的特定容器响应提供给它的空间。这将允许编写一次组件，然后将其放在页面上的任何位置，同时它将其内容调整为当前大小。 无论窗口大小是多少。 这是我们在元素查询和媒体查询之间看到的第一个区别。每个人都希望在某个时候可以创建一个规范，以标准化元素查询（或达到相同目标的东西）并使它们本机，干净，简单且健壮。大多数人都认为媒体查询非常有限，对模块化设计和真正的响应能力没有帮助。

有一些polyfills /库以不同方式解决问题（尽管可以称为替代方法，而不是解决方案）：

CSS元素查询-https: //github.com/marcj/css-element-queries
BoomQueries- https://github.com/BoomTownROI/boomqueries
eq.js- https://github.com/Snugug/eq.js
ElementQuery- https://github.com/tysonmatanich/elementQuery
还有一些，我不在这里列出，但您可以自由搜索。我无法说出哪个当前可用的选项是最好的。您必须尝试一些并做出决定。

我已经看到了针对类似问题的其他解决方案。通常他们使用计时器或引擎盖下的窗口/视口大小，这不是真正的解决方案。此外，我认为理想上应该主要在CSS中解决，而不是在javascript或html中解决。

#5楼

使用Clay.js（ https://github.com/zzarcon/clay ），检测元素大小的变化非常简单：

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3207171

标签

javascript

div