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; width: 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

 

posted @ 2020-04-30 17:20  Mmonologue  阅读(508)  评论(0)    收藏  举报