<!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. 使用 Visual Studio 开发、测试和部署 Azure Functions（二）测试，部署

    1,引言 上一篇介绍了使用使用 Visual Studio 开发 "Azure Functions" 函数,此篇介绍 “Azure Functions” 的测试以及直接从 Vist ...

  2. vulnhub~DC-9

    首先对于整体的思路,网上有很多的教程,如果国内的不能满足建议‘fanqiang’,Google有很多大佬,各个部分都有详细的说明.但又由于每个人的环境都有所不同,所以会在同样的命令行执行后出现不同的错 ...

  3. stm32：extern关键字

    参考:http://c.biancheng.net/view/404.html 1.在一个文件中: #include <stdio.h> int max(int x,int y); int ...

  4. find的基本查询命令《一》

    一. find的基本查询命令 find命令最常用的是查找某个文件,如: find ./ -name "abc.txt" 则会在当前目录及子目录下查找abc.txt文件 更常用的是查 ...

  5. Redis系列(五)：Redis的过期键删除策略

    本篇博客是Redis系列的第5篇,主要讲解下Redis的过期键删除策略. 本系列的前4篇可以点击以下链接查看: Redis系列(一):Redis简介及环境安装 Redis系列(二):Redis的5种数 ...

  6. 好玩Python——PIL项目实训

    PIL学习总结: 1. 2,PIL库概述: pil库可以完成图像归档和图像处理两方面功能的需求: 图像归档:对图像进行批处理,生成图像预览,图像转换格式等: 图像处理:图像基本处理,像素处理,颜色处理 ...

  7. (js描述的)数据结构[栈结构]（2）

    (js描述的)数据结构[栈结构](2) 一.什么是栈结构 1.一种受限制的线性结构,这种结构可以基于数组来实现. 2.可以抽象成一个容器,上面的是栈顶,底下的是栈底.所以仅允许对栈顶进行操作, 二.栈 ...

  8. Linux学习，账号管理与权限管理

    linux系统本来不认识账号,只是通过UID(用户ID)和GID(所属组ID)来区分账号属性的.而这对应的目录如下: UID ===> /etc/passwd GID ===> /etc/ ...

  9. 页面存在多个url，使用jmeter进行遍历操作

    有一次遇见一个问题:进入网站后,有多个相同的url,但是仅url后面的路径中id有区别,如下图:这时我想要遍历点击查看url详情内容:那么就可以使用一个“逻辑控制器---foreach控制器” 如下: ...

  10. 刨根问底系列（1）——虚假唤醒（spurious wakeups）的原因以及在pthread_cond_wait、pthread_cond_singal中使用while的必要性

    刨根问底之虚假唤醒 1. 概要 将会以下方式展开介绍: 什么是虚假唤醒 什么原因会导致虚假唤醒(两种原因) 为什么系统内核不从根本上解决虚假唤醒这个"bug"(两个原因) 开发者如 ...