<!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. 广告行业中那些趣事系列8：详解BERT中分类器源码

    最新最全的文章请关注我的微信公众号:数据拾光者. 摘要:BERT是近几年NLP领域中具有里程碑意义的存在.因为效果好和应用范围广所以被广泛应用于科学研究和工程项目中.广告系列中前几篇文章有从理论的方面 ...

  2. CentOS下的Docker-Compose离线安装

    公司服务器已经安装了 Docker 环境,但没有安装 Docker Compose,使用起来十分不便.由于服务无法连接外网,下面演示如何离线安装 Docker Compose. (1)首先访问 doc ...

  3. PTA | 1010 一元多项式求导 (25分)

    设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格式: ...

  4. Nginx知多少系列之(一)前言

    目录 1.前言 2.安装 3.配置文件详解 4.工作原理 5.Linux下托管.NET Core项目 6.Linux下.NET Core项目负载均衡 7.Linux下.NET Core项目Nginx+ ...

  5. SQL Server 存储过程分页。

     create proc proc_Product@page int, -- 页数@row int --  一页有几行Asdeclare @newpage int  set @newpage = (@ ...

  6. Bitmap之内存缓存和磁盘缓存详解

    原文首发于微信公众号:躬行之(jzman-blog) Android 中缓存的使用比较普遍,使用相应的缓存策略可以减少流量的消耗,也可以在一定程度上提高应用的性能,如加载网络图片的情况,不应该每次都从 ...

  7. 团队项目-运动App

    一:团队成员介绍 队长:温学智 博客地址:https://www.cnblogs.com/dazhi151/                    技术型大佬,学习能力相对团队来说是最高的.并且作为班 ...

  8. python3（十九）Partial func

    # 偏函数(Partial function) # 如int()函数可以把字符串转换为整数,当仅传入字符串时,int()函数默认按十进制转换 # 但int()函数还提供额外的base参数,默认值为10 ...

  9. 来说说Java中String 类的那些事情

    今天正好学校那边的任务不多,我就打算把Stirng 的有关知识点都总结在一起了,这样有利于知识的系统性,要不然学多了就会越来越杂,最主要的是总会忘记,记忆的时间太短了,通过这种方式,把它归纳在一起,写 ...

  10. Python实战---制作专属有声小说（调用百度语音合成接口）

    这一次的目标是使用百度云的人工智能接口,实现文字转语音的实时转换,将小说文字转换成语音朗读出来. 百度云接口调用 百度的这个接口对于我们普通用户非常友好,他的很多功能都是免费的,而且我们每天可以免费调 ...