javascript - Wie wird das Objekt, auf das diese Änderung zeigt, in verschachtelten Funktionen geändert?
Ich habe eine Demo geschrieben, deren Funktion darin besteht, dass die Länge des rechteckigen Blocks länger wird und dann die Höhe höher wird. Ich bin auf das folgende Problem gestoßen:
Beim Ausführen der folgenden Funktionsverschachtelung
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}Sie müssen that=this verwenden, um Parameter zu übergeben, sonst meldet der Browser den folgenden Fehler
Uncaught TypeError: 'getComputedStyle' konnte nicht auf 'Window' ausgeführt werden: Parameter 1 ist nicht vom Typ 'Element'.
Ich habe den gesamten Code am Ende gepostet. Ich möchte wissen, warum die Verwendung von that=this zur Übergabe von Parametern das Problem lösen kann. Wenn keine Parameter übergeben werden, auf wen zeigt dies dann zweimal? Gibt es in Chrome und Firefox eine gute Debugging-Methode, die jede Änderung dieses Werts überwachen und anzeigen kann?
HTML-Code:
<!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>CSS-Code:
.wrap{
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
border: 4px solid black;
}js-Code:
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];
}
}
