javascript - Comment l'objet pointé par ce changement dans les fonctions imbriquées?
J'ai écrit une démo, dont la fonction est que lorsque la souris entre, la longueur du bloc rectangulaire devient plus longue, puis la hauteur devient plus élevée. J'ai rencontré le problème suivant :
Lors de l'exécution de la fonction d'imbrication suivante
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}Vous devez utiliser that=this pour transmettre les paramètres, sinon le navigateur signalera l'erreur suivante
Uncaught TypeError : échec de l'exécution de "getComputedStyle" sur "Window" : le paramètre 1 n'est pas de type "Element".
J'ai posté l'intégralité du code à la fin. Je veux savoir pourquoi utiliser that=this pour passer des paramètres peut résoudre le problème ? Si aucun paramètre n’est transmis, qui pointe-t-il deux fois ? Existe-t-il une bonne méthode de débogage dans Chrome et Firefox qui permet de surveiller chaque modification de cette valeur et de l'afficher ?
Code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<link rel="stylesheet" href="animation.css" />
</head>
<body>
<p class="wrap"></p>
<script src="animation.js"></script>
</body>
</html>code CSS :
.wrap{
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
border: 4px solid black;
}code js :
window.onload = function(){
var op = document.getElementsByTagName('p');
op[0].timer = null;
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}
}
function changeStyle(obj,attr,iTarget,fn){
clearInterval(obj.timer);
var curValue = 0;
obj.timer = setInterval(function(){
curValue = parseInt(getStyle(obj,attr));
var speed = (iTarget - curValue) / 20;
speed = (speed > 0) ? Math.ceil(speed) : Math.floor(speed);
if (curValue == iTarget) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
else{
obj.style[attr] = curValue + speed + 'px';
}
},30);
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,null)[attr];
}
}
