<!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. NKOJ3765 k个最小和

    问题描述 有k个整数数组,各包含k个元素,从每个数组中选取一个元素加起来,可以得到k^k个和,求这些和中最小的k个值. 输入格式 第一行,一个整数k(k<=500)接下来k行,每行k个正整数(& ...

  2. 面试官：JavaScript 原始数据类型 Symbol 有什么用？

    以前提到 JavaScript 原始数据类型时,我们知道有Number,String,Null,Boolean,Undefined这几种.ES6 引入了新的基本数据类型Symbol和BigInt.今天 ...

  3. CPU、内存、硬盘、指令之间的关系

    我们都知道所有的程序最终都是一系列计算机能够识别的指令和数据,通过执行这些指令来控制整个计算机. 而CPU就是负责读取和解释执行这些指令的,CPU主要包括运算器.控制器和寄存器,控制器负责把指令.数据 ...

  4. app测试的一些较为重要的测试点

    安装测试 从不同的手机所自带的不同的版本的软件商城里面下载抖音并安装查看是否成功 安装后是否能正常运行安装后的文件和文件夹是否写到了指定的目录里 安装过程中取消安装,安装的文件是否在指定的目录里 安装 ...

  5. python--一些知识点

    一. ==和is的区别 1. ==意为左右两端的值是否相等 2. is意为,左边是否就是右边,python会检测左右两边的引用位置,相等才是True(注:一定范围内的数字,左右两边为True) 二. ...

  6. Golang Web入门（1）：自顶向下理解Http服务器

    摘要 由于Golang优秀的并发处理,很多公司使用Golang编写微服务.对于Golang来说,只需要短短几行代码就可以实现一个简单的Http服务器.加上Golang的协程,这个服务器可以拥有极高的性 ...

  7. Nodejs开发微信公众号中控服务

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本项目旨在为多个微信公众号 ...

  8. 双色球的Python实现

    代码如下: red_ball = [] blue_ball = [] count = 0 while count < 6: n = int(input('\033[31mPlease enter ...

  9. python字符串列表元组序列操作

    Table of Contents generated with DocToc python系列-字符串.列表.元组的操作 序列的访问及运算符 序列通用操作 访问单个元素 切片访问一部分元素 序列的复 ...

  10. Pytest系列（21）- allure的特性，@allure.description()、@allure.title()的详细使用

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 前面介绍了两种allure的 ...