查找父节点element.parentNode案例：关闭模态框 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 400px;
 9             height: 400px;
10             border: 1px solid black;
11             background-color: pink;
12             position: relative; /*子绝父相*/
13         }
14 
15         #x {
16             width: 20px;
17             height: 20px;
18             position: absolute;
19             right: 5px;
20             top: 5px;
21             background-color: deeppink;
22             font-size: 18px;
23             line-height: 20px;
24             text-align: center;
25             cursor: pointer;
26         }
27     </style>
28 </head>
29 <body>
30 <div>
31     <span id="x">x</span>
32 </div>
33 <script>
34     let x = document.getElementById('x');
35     x.onclick = function () {
36         this.parentNode.style.display = 'none';
37     }
38 </script>
39 </body>
40 </html>
posted @ 2019-12-20 14:59  杨小越  阅读(221)  评论(0)    收藏  举报