zoukankan      html  css  js  c++  java
  • js的属性监听

     1 <!DOCTYPE html>
     2 
     3 <html>
     4 
     5 <head>
     6 
     7  <meta charset="UTF-8">
     8 
     9     <title></title>
    10 
    11 </head>
    12 
    13  
    14 
    15  
    16 
    17 <body>
    18 
    19     <div id="target" style="height: 200px;  600px;aqua; display: none;"></div>
    20 
    21     <div id="test" style="position: relative; display: block;" class="show">test</div>
    22 
    23     <script type="text/javascript">
    24 
    25         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    26 
    27         var element = document.querySelector('#test');
    28 
    29         var target = document.querySelector('#target')
    30 
    31         var observer = new MutationObserver(function (mutations) {
    32 
    33             mutations.forEach(function (mutation) {
    34 
    35                 if (mutation.type == "attributes" ) {
    36 
    37                     console.log(mutation.target.style.display);
    38 
    39                     if(mutation.target.style.display == 'none'){
    40 
    41                         testing.style.display = 'none'
    42 
    43                     }else{
    44 
    45                         testing.style.display = 'block'
    46 
    47                     }
    48 
    49                 }
    50 
    51             });
    52 
    53         });
    54 
    55         observer.observe(element, {
    56 
    57             attributes: true 
    58 
    59         });
    60 
    61     </script>
    62 
    63 </body>
    64 
    65  
    66 
    67 </html>
    68 
    69  
  • 相关阅读:
    new、delete和malloc、free
    重写与重载
    面向对象三个基本特征
    Js零散知识点笔记
    ES6 笔记
    js 单例模式笔记
    关于闭包的见解
    DOM笔记
    浏览器差异
    JS高级程序设计 笔记
  • 原文地址:https://www.cnblogs.com/web-zs/p/12810021.html
Copyright © 2011-2022 走看看