Javascript thay đổi màu ảnh onclick

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

2, trước tiên chúng ta phải lấy phần tử bằng cách sử dụng

3 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"

<img id="myImg" src="1.jpg"/>
<button onclick="changeImage()">Change Imagebutton>

Ở đây, chúng ta có một thẻ

4 với id = "myImg". Và chúng tôi cũng đã thêm một sự kiện

2 vào nút sẽ kích hoạt chức năng

6 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 nhấp vào nút bằng sự kiện

7

Tại đây, khi hàm

6 được kích hoạt, nó sẽ lấy phần tử

1 trong DOM bằng cách sử dụng phương thức

3 và thay đổi nguồn (src) của hình ảnh cũ bằng hình ảnh mới

Thay đổi nhiều hình ảnh src onClick Sự kiện

Để thay đổi nhiều src hình ảnh bằng sự kiện onclick

1. Thêm tên lớp cho từng phần tử img,
2. Nhắm mục tiêu tất cả hình ảnh trong DOM bằng phương pháp
   3
3. 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

 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <button onclick="changeAllImage()">Change Imagebutton>

Ở đâ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

4 để kích hoạt chức năng

5

Trong phần tập lệnh, chúng tôi đã mã hóa chức năng JavaScript

Khi chức năng

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ẻ

4 có tên lớp "myImg" bằng cách sử dụng phương thức

3

Tiếp theo, chúng tôi lặp qua tất cả các hình ảnh bằng phương pháp

9 và thay đổi/thay thế nguồn (

 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <img class="myImg" src="1.jpg" width="75%" alt="" srcset="" />
 <button onclick="changeAllImage()">Change Imagebutton>

0) của hình ảnh bằng một hình ảnh mới

Làm cách nào để thay đổi màu của hình ảnh trong JavaScript?

Làm cách nào để thay đổi hình ảnh bằng cách nhấp vào hình ảnh đó trong JavaScript?

Bạn có thể thêm onClick vào một hình ảnh không?

Làm cách nào để thay đổi hình ảnh thông qua JavaScript?