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];
}
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le this de la fonction appelée via l'événement pointe vers l'élément qui a déclenché l'événement, donc le this de la fonction appelée par l'événement op[0].onmouseover pointe vers op[0];
Le this de la fonction de rappel transmis par la fonction changeStyle pointe vers la fenêtre, car if (fn) { fn();} est équivalent à la fenêtre appelant la fonction
Si vous souhaitez suivre l'exécution du code, vous pouvez utiliser le débogage des points d'arrêt pour voir l'affectation de chaque variable pendant l'opération
Cela représente un objet interne généré automatiquement lors de l'exécution de la fonction et ne peut être utilisé qu'à l'intérieur de la fonction.
Comme la fonction est utilisée dans différentes situations, sa valeur changera. Mais il existe un principe général : ceci fait référence à l’objet qui appelle la fonction. Je pense que vous pouvez lire cet article de Ruan Yifeng : http://www.ruanyifeng.com/blo...
Oubliez les soucis du
thispointage, (es6) veuillez utiliser les fonctions fléchéesSi vous ne réussissez pas, savez-vous quel style votre fonction de changement change ? Si vous l'utilisez directement, cela pointe vers la fenêtre. Comme mentionné au premier étage, vous connaîtrez le point d'arrêt dès que vous le briserez
.Si vous n'utilisez pas that=this pour lier this à la portée lexicale actuelle, alors this pointe vers la fenêtre d'objet globale, qui est la liaison par défaut de this.