javascript - Bagaimanakah objek yang ditunjukkan oleh perubahan dalam fungsi bersarang ini?
Saya menulis demo, yang fungsinya ialah apabila tetikus bergerak masuk, panjang bongkah segi empat tepat menjadi lebih panjang, dan kemudian ketinggian menjadi lebih tinggi saya menghadapi masalah berikut:
Apabila melaksanakan fungsi bersarang berikut
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}Anda mesti menggunakan itu=ini untuk lulus parameter, jika tidak penyemak imbas akan melaporkan ralat berikut
Uncaught TypeError: Gagal melaksanakan 'getComputedStyle' pada 'Window': parameter 1 bukan jenis 'Element'.
Saya menyiarkan keseluruhan kod pada penghujung saya ingin tahu mengapa menggunakan itu=ini untuk lulus parameter boleh menyelesaikan masalah? Jika tiada parameter yang diluluskan, siapa yang menunjukkan ini dua kali? Adakah terdapat kaedah penyahpepijatan yang baik dalam Chrome dan Firefox yang boleh memantau setiap perubahan nilai ini dan memaparkannya?
kod 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>kod css:
.wrap{
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
border: 4px solid black;
}js kod:
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];
}
}
