如何检测div或body中的变化?

GibboK

我有以下脚本,我需要检测:

  • 内容元素已更改(例如大小/位置)或
  • 身体元素发生了变化(例如大小/位置)

我不能在按钮本身上使用此逻辑。

有什么活动?您能否提供代码示例?

http://jsbin.com/sewerumive/1/

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script>
        window.App = {
            start: function () {
                var btn = document.getElementById('addContent');
                btn.addEventListener('click', function () {
                    var body = document.getElementsByTagName('body')[0];
                    body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
                });

                //---
                // does not work i need the content
                window.addEventListener('resize', function () {
                    console.log('content / window / resize');
                });

                var content = document.getElementById('content');
                content.addEventListener('change', function () {
                    console.log('content / div / resize');
                }.bind(this));
            }
        };
    </script>
</head>


<body onload="App.start();">
    <div id="content">
        <button id="addContent" type="button">Add content!</button>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</body>

</html>
亚历山大·达扬

MutationObserver提供了一种对DOM中的任何更改做出反应的方法。

MDNMSDN上阅读更多内容

而且这个线程在这里输入链接描述

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何检测角度为 2 的 div 中的内部 html 变化?

来自分类Dev

如何检测JavaScript中的月份变化?

来自分类Dev

如何检测类变量在组件中的变化

来自分类Dev

如何检测角度指令中的位置变化?

来自分类常见问题

如何检测方向变化?

来自分类Dev

如何检测元素的变化

来自分类Dev

如何从iOS设置中检测动态字体大小的变化?

来自分类Dev

在angularjs中设置值时如何检测输入元素的变化

来自分类Dev

如何在Microsoft Bing Maps中检测缩放变化

来自分类Dev

angular2如何检测有状态管道中的变化?

来自分类Dev

如何在角度js中检测多维数组的模型变化

来自分类Dev

如何通过Android中的adb检测屏幕变化

来自分类Dev

如何检测javascript中的prefers-color-scheme变化?

来自分类Dev

如何从ajax加载的内容中检测选择的变化

来自分类Dev

在angularjs中设置值时如何检测输入元素的变化

来自分类Dev

如何检测大文件中的少量变化(TB)

来自分类Dev

如何在GXT组合框中检测实际值变化

来自分类Dev

如何在角度js中检测多维数组的模型变化

来自分类Dev

如何检测WPF中的窗口内容变化?

来自分类Dev

如何检测月/年变化

来自分类Dev

如何检测DOM属性的变化?

来自分类Dev

PHP如何检测变量的变化?

来自分类Dev

在iframe中检测方向变化

来自分类Dev

检测复杂对象中的变化

来自分类Dev

在iframe中检测方向变化

来自分类Dev

addEventListener-检测div元素的变化?

来自分类Dev

如何检测jquery中div外的点击

来自分类Dev

如何检测单元格格式的变化?

来自分类Dev

如何检测核心数据关系的变化?