<!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第三方包之PrettyTable

    Python第三方包之PrettyTable 可以让我们将数据用表格的方式展示出来 安装方式 pip install PrettyTable 测试是否安装成功 使用方法与对比 增加一条数据 先简单的看 ...

  2. minIO分布式集群搭建+nginx负载均衡

    暂时关闭防火墙 systemctl stop firewalld 查看防火墙状态 systemctl status firewalld 赋予最高权限 chmod +x minio !/bin/bash ...

  3. 跨域问题：Cross origin requests are only supported for protocol schemes: http...

    跨域:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extensi ...

  4. 直播回顾 | IOT、AI、云计算等融合技术推进制造业产业转型（二）

    3月31日,BoCloud博云.京东智联云.海尔集团联手,以“制造”到“智造”为主题,进行了IT赋能企业数字化转型实践分享. 博云售前解决方案架构师尹贺杰,京东云与AI企业云业务部高级业务技术经理吴世 ...

  5. Git创建本地仓库&把pycharm项目添加GitHub仓库上

    一.创建本地仓库 1.1.下载Git地址:https://git-scm.com/downloads 下载完,一路next就可以 1.2.打开Git Bash输入: #创建一个learngit目录 $ ...

  6. Jmeter压力测试笔记（6）性能调测-压力并发-模拟生产环境数据

    问题原因找到了,那就好办了. 找到阿里云技术人员,让他们强行给我们上架了一个共享代理模式的Redis. 并重新进行压力测试. 哦豁~ 开心,压力测试顺利,异常率大大降低实际为: 数据库DBA反馈,数据 ...

  7. java中查询某个类已经创建了多少个对象了

    这个代码主要是使用类的静态字段和构造函数,可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象? 主要是在构造函数中用到了静态数据,进行显示已经构造了多少个类对 ...

  8. MTK Android修改System分区

    Z:\rk3326_p_hq_rf8637sa\device\rockchip\common\BoardConfig.mk #Calculate partition size from paramet ...

  9. python中汉字转数字

    #!/usr/bin/env python # -*- coding: utf-8 -*- common_used_numerals_tmp ={'零':0, '一':1, '二':2, '三':3, ...

  10. JQUERY滚动加载

    $(document).height():整个网页的高度$(window).height():浏览器可视窗口的高度$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直 ...