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];
}
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Fungsi ini yang dipanggil melalui acara menghala ke elemen yang mencetuskan acara, jadi fungsi ini yang dipanggil oleh op[0].onmouseover acara menghala ke op[0];
Fungsi panggil balik ini yang dihantar oleh fungsi changeStyle menghala ke tetingkap, kerana jika (fn) { fn();} adalah bersamaan dengan tetingkap yang memanggil fungsi
Jika anda ingin menjejaki pelaksanaan kod, anda boleh menggunakan penyahpepijatan titik putus untuk melihat penetapan setiap pembolehubah semasa operasi
Ini mewakili objek dalaman yang dijana secara automatik apabila fungsi berjalan dan hanya boleh digunakan di dalam fungsi.
Memandangkan fungsi digunakan dalam situasi yang berbeza, nilai ini akan berubah. Tetapi terdapat prinsip umum, iaitu, ini merujuk kepada objek yang memanggil fungsi tersebut. Saya rasa anda boleh membaca artikel oleh Ruan Yifeng ini: http://www.ruanyifeng.com/blo...
Lupakan kebimbangan
thismenuding, (es6) sila gunakan fungsi anak panahJika anda tidak lulus itu, adakah anda tahu gaya siapa yang diubah fungsi perubahan anda? Jika anda menggunakan ini secara langsung, ini menghala ke tingkap Seperti yang dinyatakan di tingkat satu, anda akan mengetahui titik putus sebaik sahaja anda memecahkannya
Jika anda tidak menggunakan itu=ini untuk mengikat ini kepada skop leksikal semasa, maka ini menunjuk ke tetingkap objek global, yang merupakan pengikatan lalai ini.