- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
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];
}
}
黄舟2017-05-19 10:12:31
通过事件调用的函数的this指向触发该事件的元素,所以op[0].onmouseover事件调用函数的this指向的是op[0]；
changeStyle函数传入的回调函数的this指向的是window，因为 if (fn) { fn();}相当于window调用了该函数
如果想跟踪代码的执行情况可以采用断点调试，能看到各个变量在运行中的赋值情况
我想大声告诉你2017-05-19 10:12:31
this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
我想你可以看看阮一峰的这篇：http://www.ruanyifeng.com/blo...
PHP中文网2017-05-19 10:12:31
如果不传that，你的change函数，改变的是谁的样式，你知道吗？如果直接用this，this是指向window的，如一楼所说，断点，一断就知道