<!DOCTYPE html>
<html>

<head>

　<meta charset="UTF-8">

    <title></title>
</head>
<body>
    <div id="target" style="height: 200px; width: 600px;aqua; display: none;"></div>
    <div id="test" style="position: relative; display: block;" class="show">test</div>
    <script type="text/javascript">
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        var element = document.querySelector('#test');
        var target = document.querySelector('#target')
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type == "attributes" ) {
                    console.log(mutation.target.style.display);
                    if(mutation.target.style.display == 'none'){
                        testing.style.display = 'none'
                    }else{
                        testing.style.display = 'block'
                    }
                }
            });
        });
        observer.observe(element, {
            attributes: true 
        });
    </script>
</body>
</html>

js的属性监听的更多相关文章

  1. Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  2. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  3. 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...

  4. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  5. Vue 变量，成员，属性监听

    Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  6. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  7. vue对象属性监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  8. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  9. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

随机推荐

  1. python学习笔记--字符串格式化

    字符串和常量 print(r'hello\py\thon') r 代表后面字符不进行转义,原样输出; 表示常量,命名时变量名字大写代表常量.NAME = 'liulixue'; 字符串表示:' ', ...

  2. 存储机制 cookie session jwt token

    cookieCookie的诞生 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的.Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网 ...

  3. 配置NTP和crontab计划任务

                                    配置NTP网络时间客户端和设置计划任务 3.1问题 本例要求配置虚拟机server0,能够自动校对系统时间.相关信息如下: NTP服务器 ...

  4. web日志分析的重要性

    虽然不可能对庞大的日志文件进行逐条的阅读,但是在这些日志文件中,确实会包含一些非常重要的信息.例如,在什么时间.有哪些ip地址访问了网站中的什么资源,等等. 通过对日志文件的分析,可以获得如下信息. ...

  5. 【php】面向对象（一）

    1. 学习面向对象的目标: a) 语法的学习: b) 编程思想的学习: i. 过程化: ii. 面向对象:2. 比较(有对象和没对象的区别) a) 没对象: i. 我饿了 自己做饭 ii. 我渴了 自 ...

  6. 鬼吹灯之龙岭迷窟百度云迅雷BT在线观看免费全集

    看视频搜索微信公众号:qyw1091 还记得去年5月11日在高家堡举行的<鬼吹灯之龙岭迷窟>开机仪式吗?时隔数月,这部网剧于4月1日将在腾讯视频全网独播了! . <鬼吹灯之龙岭迷窟& ...

  7. Vue-router 第5节 vue-router利用url传递参数

    Vue-router 第5节 vue-router利用url传递参数 目录 Vue-router 第5节 vue-router利用url传递参数 第5节 vue-router利用url传递参数 冒号的 ...

  8. rdd简单操作

    1.原始数据 Key value Transformations(example: ((1, 2), (3, 4), (3, 6)))  2. flatMap测试示例 object FlatMapTr ...

  9. python3（二十六）slots

    """ """ __author__ = 'shaozhiqi' # python是动态语言,所以定义类后,我们可以动态的给类绑定属性和方法 ...

  10. python3（十八）decorator

    # -----------------------1-------------------------------------------- # 由于函数也是一个对象,而且函数对象可以被赋值给变量,所 ...