Làm cách nào để thay đổi hình ảnh onclick của tôi trong html?

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"

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

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

        

Ở đây, khi chức năng changeImage() đượ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 getElementById() 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ả cá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ẻ 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 cách sử dụ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

Tôi có thể sử dụng onclick trên hình ảnh trong HTML không?

Thuộc tính onclick là một phần của Thuộc tính sự kiện và có thể được sử dụng trên mọi phần tử HTML .

Làm cách nào để thay đổi hình ảnh trong HTML?

Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn thay đổi kích thước của hình ảnh. Bước 2. Bây giờ, đặt con trỏ bên trong thẻ img. Và sau đó, chúng ta phải sử dụng thuộc tính chiều cao và chiều rộng của thẻ img để thay đổi kích thước của hình ảnh

Làm cách nào để hoán đổi hình ảnh khi nhấp vào JavaScript?

Để hoán đổi hình ảnh trong JavaScript, hãy sử dụng phương thức “match()” với sự kiện “onclick” để khớp hình ảnh mặc định và hoán đổi hình ảnh đó với một hình ảnh khác khi nhấp vào nút . , the “includes()” method with an “onmouseover” event to swap the default image with the specified image upon the mouse hover or equalize the “src” ...

Làm cách nào để thay đổi hình ảnh trong HTML bằng JS?

JavaScript cung cấp thuộc tính src để thay đổi nguồn hình ảnh bằng cách chỉ định đường dẫn của tệp . Chẳng hạn, phương thức getElementId() được sử dụng để trích xuất phần tử HTML thông qua id, sau đó thuộc tính src sẽ thay đổi hình ảnh nguồn. Sau khi giải nén, tệp ảnh nguồn mới được gán.