求教大神们，关于JS同一特效在同一个网页多次调用的问题..

1、我要的效果是，鼠标移到DIV或DIV中span标签后，文字与DIV同时变大；鼠标移开时恢复原状并且这个特效可以在同一页面进行多次调用；
2、我现在写的特效只能指定某个ID用；好像不能多次调用；同时浏览器总是报错：
Uncaught TypeError: Cannot read property '0' of undefined
求大神帮我指证，我哪里写错了，需要怎么修改。最好能有案例，谢谢大神们哈；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>基础运动 - 文字放大缩小</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background-color: #118833;
                color: #FFFFFF;
                line-height: 300px;
                text-align: center;
            }
            div span{
                display: block;
                font-size: 14px;
            }
        </style>
        <script>
        
            var Font_Size = 14;
            var Width_da = 300;
            var tmier = null;
            function fontSize_da(iTerget, iWidth){
                //var odiv_1 = document.getElementById('ods');
                //var odiv_1 = document.getElementsByTagName('div');
                //var span_1 = odiv_1.getElementsByTagName('span');
                clearInterval(tmier);
                tmier = setInterval(function(){
                    var seepa = 0;
                    if(Font_Size < iTerget){
                        seepa = 2;
                    }
                    else{
                        seepa = -2;
                    }
                    //
                    var seepax =0;
                    if(Width_da < iWidth){
                        seepax =50;
                    }
                    else{
                        seepax = -50;
                    }
                    //
                    if(Font_Size == iTerget){
                        //alert('测试');
                        clearInterval(tmier);
                        
                    }
                    else{
                        //alert('测试');
                        Font_Size+= seepa;
                        Width_da+=seepax;
                        this.children[0].style.fontSize = Font_Size + 'px';
                        this.style.width = Width_da +'px';
                    }
                }, 30);
                
            }
        </script>
    </head>
    <body>
        <div id="ods" onmouseenter="fontSize_da(24, 604);" onmouseout="fontSize_da(14, 300);">
            <span>基础运动 - 文字放大缩小</span>
        </div>
        
        <div onmouseenter="fontSize_da(24, 604);" onmouseout="fontSize_da(14, 300);">
            <span>这是什么</span>
        </div>
    </body>
</html>

主要有两个问题：

这里不是this：
```
this.children[0].style.fontSize = Font_Size + 'px';
this.style.width = Width_da +'px';
```
某元素绑定的事件函数中，this并不指代当前元素，只有event.currentTarget表示当前事件元素。
你使用了异步函数setInterval，异步函数必须要等待主进程完成之后才会运行，所以当此异步函数内部的函数运行时，主进程已经结束，此时的event值早已改变不可能指代主进程还在运行时候的事件，那么就需要使用一个变量来储存主进程运行时候的事件，这也算是闭包的一种应用，所以代码还需要这么改：
```
function fontSize_da(iTerget, iWidth){
    var eventCurrentTarget = event.currentTarget;
    
    clearInterval(tmier);
    tmier = setInterval(function(){
    
    ......
    
    eventCurrentTarget.children[0].style.fontSize = Font_Size + 'px';
    eventCurrentTarget.style.width = Width_da +'px';
    
    ......
    
}
```

你代码里的this实际引用的是window

在一开始的时候传递this，或者 event

<div onmouseenter="fontSize(this,24,604)" ...>...</div>

function fontSize(element,targetFontSize,targetWidth){
    ...
}

ps:这种效果建议用css来实现

this在setInterval里面指向了window, window对象肯定是没有children ，style 属性的。所以报错。
你在setInterval外面，fontSize_da里面定义一个 var _this = this;
然后改为
_this.children[0].style.fontSize = Font_Size + 'px';
_this.style.width = Width_da +'px';

这样试试。。

【热门文章】