/codegym.vn/ - 76
Hình 3.6: Minh hoạ sự kiện chuột
1. <form>
2. <img id
=
"myImage" src
=
"images/ball.png" />
3. <p>Click button below to move the image to right</p>
4. <input type
=
"button" value
=
"Click Me" />
5. </form>
Bước 2: Tạo biến imgObj để lưu ảnh
1.
let
imgObj
=
null
;
Bước 3: Sử dụng hàm getElementById () để nhận được một đối tượng DOM và sau
đó gán nó cho biến imgObj.
1. imgObj
=
document
.
getElementById
(
'myImage'
);
Bước 4: Tạo hàm init () để khởi tạo imgObj mà chúng ta đã đặt vị trí và các thuộc tính
còn lại.
1.
function
init
()
{
2. imgObj
=
document
.
getElementById
(
'myImage'
);
3. imgObj
.
style
.
position
=
'relative'
;
4. imgObj
.
style
.
left
=
'0px'
;
5.
}
Bước 5: Tạo hàm moveRight () để tăng khoảng cách trái 10 pixel. Bạn cũng có thể
đặt nó là một giá trị âm để di chuyển nó sang bên trái.
1.
function
moveRight
()
{
2. imgObj
.
style
.
left
=
parseInt
(
imgObj
.
style
.
left
)
+
10
+
'px'
;
3.
}
Bước 6: Gọi hàm init() khi trình duyệt được tải lần đầu
1. window
.
onload
=
init
;
Bước 7: Xác định sự kiện onclick cho button
1. <input type
=
"button" value
=
"Click Me" onclick
=
"moveRight
();
" />
Bước 8: Chạy chương trình. Click chuột vào button Click Me và quan sát kết quả.
