问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何检测 DIV 的尺寸变化？

社区维基
1
新手上路，请多包涵

我有以下示例 html，有一个 100% 宽度的 DIV。它包含一些元素。在执行窗口大小调整时，内部元素可能会重新定位，并且 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>

原文由 William X 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtml
阅读 986
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

这个库有一个类 ResizeSensor 可用于调整大小检测。

它使用基于事件的方法，因此速度非常快并且不会浪费 CPU 时间。

例子：

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

请不要使用 _jQuery onresize 插件_，因为它使用 setTimeout() 结合循环读取 DOM clientHeight / clientWidth 属性来检查更改。

这是令人难以置信的缓慢和不准确，因为它会导致 布局抖动。

披露：我与这个图书馆直接相关。

原文由 Marc J. Schmidt 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

一个较新的标准是 Resize Observer api，具有良好的浏览器支持。

 function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

 Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

调整观察者大小

文档： https ://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

规范： https ://wicg.github.io/ResizeObserver

当前支持： http ://caniuse.com/#feat=resizeobserver

Polyfills： https ://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer

原文由 Daniel Herr 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题