programming html

Hiển thị hình ảnh khi nhấp vào html

Để hiển thị hình ảnh bằng JavaScript, hãy sử dụng phương thức “createElement[]” để tạo nút phần tử HTML. Để đạt được điều này, phải lấy “img” làm tham số

cú pháp
Để tạo một nút phần tử, hãy sử dụng cú pháp đã cho

tài liệu. createElement[ loại ]

ví dụ 1. Hiển thị hình ảnh với JavaScript
Trong ví dụ này, không cần thêm mã HTML vì chúng tôi sẽ thêm hình ảnh bằng JavaScript. Với mục đích này, hãy viết đoạn mã sau vào tệp JavaScript

function displayImage [ src , width, height] {
var img = tài liệu. createElement["img"];
img. src = src ;
img. chiều rộng = chiều rộng ;
img. chiều cao = chiều cao ;
tài liệu. cơ thể . appendChild[ img ];
}

Trong đoạn mã trên

Xác định chức năng “displayImage[]” với nguồn hình ảnh “src”, “width” và “height” làm tham số
Thêm thẻ hình ảnh hoặc thành phần trong JavaScript bằng cách sử dụng phương thức “createElement[]”
Đặt các thuộc tính hình ảnh như nguồn, chiều rộng và chiều cao của hình ảnh
Sau đó, thêm hình ảnh vào nội dung HTML bằng cách sử dụng “tài liệu. cơ thể người. phương thức appendChild[]”

Bây giờ, hãy gọi hàm “displayImage[]” và chuyển chiều cao, chiều rộng và nguồn của hình ảnh làm đối số

hình ảnh hiển thị ['2. jpg', 320, 250];

đầu ra

Trong ví dụ tiếp theo, hãy xem cách hiển thị hình ảnh khi nhấp vào nút

ví dụ 2. Hiển thị hình ảnh trên nút bấm với lớp CSS
Ví dụ này là tất cả về cách một lớp CSS có thể được sử dụng để hiển thị hình ảnh trong JavaScript và cách hình ảnh sẽ xuất hiện khi nhấp vào nút. Đầu tiên, chúng ta sẽ tạo một nút trong tệp HTML gọi hàm “displayImage[]” khi nút được nhấp

Nhấp vào

Hãy tạo một lớp CSS “imageFeatures” để đặt các thuộc tính hình ảnh như “chiều dài” và “chiều rộng” của hình ảnh

.Tính năng hình ảnh
{
chiều rộng . 320;
chiều cao . 250;
}

Xác định hàm “displayImage[]” với một tham số duy nhất src. Sau đó, thêm phần tử hình ảnh bằng phương thức createElement[] và đặt nguồn của hình ảnh. Bây giờ, thêm lớp “imageFeatures” để thiết lập các thuộc tính hình ảnh bằng cách sử dụng “classList. phương thức thêm[]”. Cuối cùng, nối thêm thẻ hình ảnh vào tài liệu bằng cách sử dụng lệnh “tài liệu. cơ thể người. phương thức appendChild[]”

function displayImage [ src ] {
var img = tài liệu. createElement["img"];
img. src = src ;
img. Danh sách lớp học . thêm["Tính năng hình ảnh"];
tài liệu. cơ thể . appendChild[ img ];
}

Như bạn có thể thấy, hình ảnh được hiển thị khi nhấp vào nút mà không có bất kỳ độ trễ nào

Chúng tôi đã hiển thị hình ảnh với sự trợ giúp của JavaScript

Phần kết luận

Để hiển thị hình ảnh bằng JavaScript, hãy sử dụng phương thức “createElement[]” để tạo thẻ hình ảnh. Cụ thể hơn, phương thức createElement[] được sử dụng để tạo một nút phần tử. Trong bài viết này, chúng tôi đã mô tả quy trình hiển thị hình ảnh bằng JavaScript

Trong hướng dẫn này, hãy tìm hiểu cách hiển thị hình ảnh khi nhấp vào nút bằng jQuery. Câu trả lời ngắn gọn là. sử dụng jQuery show[] và hide[]. Ban đầu, sử dụng thuộc tính CSS display:none để ẩn hình ảnh. show[] hiển thị hình ảnh khi nhấp vào nút và hide[] ẩn hình ảnh

Bạn cũng có thể sử dụng hàm toggle[] của jQuery để thực hiện hiệu ứng ẩn hiện. Nó chuyển đổi hình ảnh khi nhấp vào nút để hiển thị/ẩn hiệu ứng hình ảnh. Đối với phương thức chức năng chuyển đổi, bạn chỉ phải sử dụng một nút duy nhất để chuyển đổi hình ảnh

Hãy cùng tìm hiểu cách hiển thị hình ảnh khi bấm vào nút bằng jQuery với các ví dụ dưới đây

Mục lục

Hiển thị hình ảnh trên nút Bấm bằng cách sử dụng chức năng Hiển thị/Ẩn jQuery

Để hiển thị hình ảnh khi nhấp vào nút, bạn phải sử dụng chức năng hiển thị/ẩn jQuery. show[] hiển thị hình ảnh ẩn khi nhấp vào nút. Ban đầu, bạn phải thêm thuộc tính CSS display:none để ẩn hình ảnh. Ngoài ra, bạn cần sử dụng nút riêng biệt để hiển thị và ẩn hiệu ứng

Kiểm tra trực tiếp

Thí dụ

XHTML