<!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. 9.Metasploit制作木马后门

    01木马与后门   木马?后门? 木马和后门都有害,尤其是木马,它由攻击者主动发起,稍不留心就会被利用:后门原来是留给自己方便用的,但也有可能被非法利用,这两种程序都会给用户带来损失. 木马是指潜伏在 ...

  2. Controller与RestController的区别

    在使用Spring系列的框架的时候,相信几乎所有人都会遇见@Controller与@RestController两个注解,那么这两个注解到底有什么区别? 1. 标记有@RestController的类 ...

  3. Java进行二元操作类型转换

    当对两个数值进行二元操作时,先要将两个操作数转换为同一种类型,然后再进行计算. 如果两个操作数中有一个是double类型,另一个操作数就会转换为double类型. 否则,如果其中一个操作数是float ...

  4. Linux：启动http服务

    1.安装apache yum install httpd #根据提示,输入Y安装即可成功安装 systemctl start httpd.service #启动apache systemctl sto ...

  5. jvm入门及理解（二）——类加载器子系统

    一.类加载子系统的作用 类加载子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识: ClassLoader只负责class文件的加载,至于它是否可以运行,则由E ...

  6. Dubbo学习系列之十八（Skywalking服务跟踪）

    我们知道,微服务不是独立的存在,否则就不需要微服务这个架构了,那么当发起一次请求,如何知道这次请求的轨迹,或者说遇到响应缓慢. 请求出错的情况,我们该如何定位呢?这就涉及到APM(Applicatio ...

  7. 记一次pgsql中查询优化（子查询）

    记一次pgsql的查询优化 前言 这是一个子查询的场景,对于这个查询我们不能避免子查询,下面是我一次具体的优化过程. 优化策略 1.拆分子查询,将需要的数据提前在cte中查询出来 2.连表查询,直接去 ...

  8. Linux c++ vim环境搭建系列（2）——Ubuntu18.04.4编译安装llvm clang

    2. 源码编译安装llvm clang 参考网址: https://llvhttps

  9. java课程设计之--Elasticsearch篇

    一.团队课程设计博客链接 https://www.cnblogs.com/Rasang/p/12169899.html 二.个人负责模块或任务说明 2.1Elasticsearch简介 Elastic ...

  10. AJ学IOS（41）UI之核心动画 两行代码搞定3D转场

    AJ分享,必须精品 效果: 代码: 其实代码很少,苹果都给封装好了 // 1.创建核心动画 CATransition *ca = [CATransition animation]; // 1.1动画过 ...