js - 02课 4 浅谈this -3
1.两种方式绑定, this 不同的指向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html> <head lang= "en" > <meta charset= "UTF-8" > <title></title> <style> li{width: 100px; height:150px;float:left; margin-right:30px; background: #f1f1f1;position: relative; z-index: 1;} div{width: 80px; height:200px; background:red; position: absolute; top:75px;left:10px;display: none} </style> </head> <body> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> <script> window.onload = function (){ var aLi = document.getElementsByTagName( 'li' ) for ( var i = 0; i < aLi.length; i++){ aLi[i].onmouseover = function (){ var _this = this ; showDiv(_this); } aLi[i].onmouseout = hideDiv; } } function showDiv(_this){ _this.getElementsByTagName( 'div' )[0].style.display = 'block' ; } function hideDiv(){ this .getElementsByTagName( 'div' )[0].style.display = 'none' ; } </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步