Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng hình ảnh đầu vào HTML DOM

Đối tượng hình ảnh đầu vào HTML DOM đại diện cho phần tử với type =”image” của tài liệu HTML.

Hãy xem cách tạo đối tượng hình ảnh đầu vào -

Cú pháp

Sau đây là cú pháp -

var imageInput = document.createElement(“INPUT”);
imageInput.setAttribute(“type”,”image”);

Thuộc tính

Sau đây là các thuộc tính của Đối tượng hình ảnh đầu vào HTML DOM -

Thuộc tính Giải thích
Alt Nó trả về và sửa đổi giá trị của thuộc tính alt của hình ảnh đầu vào.
Tự động lấy nét Nó trả về việc trình duyệt đã tải xong một hình ảnh trong trang web HTML hay chưa.
defaultValue Nó trả về và sửa đổi giá trị mặc định của hình ảnh đầu vào.
Đã tắt Nó trả về và sửa đổi giá trị của thuộc tính bị vô hiệu hóa của hình ảnh đầu vào.
Biểu mẫu Nó trả về tham chiếu của biểu mẫu có chứa trường hình ảnh đầu vào trong tài liệu HTML.
formAction Nó trả về và sửa đổi giá trị của thuộc tính formaction của hình ảnh đầu vào.
formEnctype Nó trả về và sửa đổi giá trị của thuộc tính formenctype của một hình ảnh đầu vào.
formMethod Nó trả về và sửa đổi giá trị của thuộc tính formmethod của hình ảnh đầu vào.
formNoValidate Nó trả về và sửa đổi xem dữ liệu của biểu mẫu có được xác thực hay không khi gửi.
formTarget Nó trả về và thay đổi giá trị của thuộc tính formtarget của hình ảnh đầu vào.
Chiều cao Nó trả về và sửa đổi giá trị của thuộc tính chiều cao của hình ảnh đầu vào.
Tên Nó trả về và thay đổi giá trị của thuộc tính tên của hình ảnh đầu vào.
Src Nó trả về và sửa đổi giá trị của thuộc tính src của hình ảnh đầu vào.
Loại Nó trả về giá trị của thuộc tính type của hình ảnh đầu vào.
Giá trị Nó trả về và sửa đổi nội dung của thuộc tính giá trị của hình ảnh đầu vào.
Chiều rộng Nó trả về và sửa đổi giá trị của thuộc tính width của hình ảnh đầu vào.

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng hình ảnh đầu vào -

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   .btn{
      background-color:#db133a;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input Image Object Example</h1>
<button onclick="createIframe()" class="btn">Create an image submit button</button>
<script>
   function createIframe() {
      var imageInput = document.createElement("INPUT");
      imageInput.setAttribute("type", "image");
      imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
      document.body.appendChild(imageInput);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng hình ảnh đầu vào HTML DOM

Nhấp vào “ Tạo nút gửi hình ảnh ”Để tạo đối tượng hình ảnh đầu vào -

Đối tượng hình ảnh đầu vào HTML DOM