Trong bài viết ngắn này, chúng ta sẽ tìm hiểu cách thay đổi/thay thế giá trị của thuộc tính src [source] của một hình ảnh trong JavaScript
Để thay đổi src hình ảnh bằng sự kiện onClick[]
, trước tiên chúng ta phải lấy phần tử bằng cách sử dụng getElementById[]
và sau đó thay đổi nguồn khi nhấp vào nút
Hãy hiểu nó bằng một ví dụ
Thay đổi src hình ảnh bằng JavaScript
Giả sử chúng tôi có một hình ảnh trên trang web của mình và chúng tôi muốn thay đổi đường dẫn src [nguồn] khi người dùng nhấp vào nút "Thay đổi hình ảnh"
Change Image
Ở đây, chúng ta có một thẻ có id = "myImg". Và chúng tôi cũng đã thêm một sự kiện
onClick[]
vào nút sẽ kích hoạt chức năng changeImage[]
khi người dùng nhấp vào
Trong phần script, chúng ta đã tạo hàm changeImage[] để thay đổi hình ảnh động khi click vào nút sử dụng sự kiện onClick
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
Ở đây, khi chức năng changeImage[]
được kích hoạt, nó sẽ lấy phần tử
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
1 trong DOM bằng cách sử dụng phương thức getElementById[]
và thay đổi nguồn [src] của hình ảnh cũ bằng hình ảnh mớiThay đổi nhiều hình ảnh src onClick Sự kiện
Để thay đổi nhiều src hình ảnh bằng sự kiện title
- Thêm tên lớp cho từng phần tử img,
- Nhắm mục tiêu tất cả các hình ảnh trong DOM bằng phương pháp
3const image = document.getElementById["myImg"]; function changeImage[] { image.src = "2.jpg"; }
- Lặp qua từng phần tử và thay đổi/thay thế nguồn img [src]
Hãy xem một ví dụ
Ở đây chúng tôi có ba hình ảnh trên trang HTML của chúng tôi
Change Image
Ở đây, chúng tôi có ba hình ảnh với tên lớp "myImg" và một nút có sự kiện
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
4 để kích hoạt chức năng
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
5Trong phần tập lệnh, chúng tôi đã mã hóa chức năng JavaScript
function changeAllImage[] {
const image = document.querySelectorAll[".myImg"];
image.forEach[element => {
element.src = '2.jpg'
}];
}
Khi chức năng
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
5 được kích hoạt, nó sẽ nhận được một Danh sách nút của tất cả các thẻ
có tên lớp "myImg" bằng cách sử dụng phương thức
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
3Tiếp theo, chúng tôi lặp qua tất cả các hình ảnh bằng cách sử dụng phương pháp
const image = document.getElementById["myImg"];
function changeImage[] {
image.src = "2.jpg";
}
9 và thay đổi/thay thế nguồn [
Change Image
0] của hình ảnh bằng một hình ảnh mới