Đối tượng HTML image DOM đại diện cho phần tử của tài liệu HTML.
Hãy để chúng tôi tạo một đối tượng img -
Cú pháp
Sau đây là cú pháp -
document.createElement(“IMG”);
Thuộc tính
Sau đây là các thuộc tính của Đối tượng hình ảnh -
| 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 một phần tử HTML hình ảnh. |
| hoàn thành | Nó trả về việc trình duyệt đã tải xong một hình ảnh trong trang web HTML hay chưa. |
| crossOrigin | Nó trả về và sửa đổi cài đặt CROS của một phần tử HTML hình ảnh. |
| chiều cao | Nó trả về và sửa đổi giá trị của thuộc tính height của một phần tử HTML hình ảnh. |
| naturalHeight | Nó trả về chiều cao tự nhiên của hình ảnh trong tài liệu HTML. |
| naturalWidth | Nó trả về chiều rộng tự nhiên của hình ảnh trong tài liệu HTML. |
| src | Nó trả về và sửa đổi giá trị của thuộc tính src của một phần tử HTML hình ảnh. |
| useMap | Nó trả về và thay đổi giá trị của thuộc tính useMap của một phần tử HTML hình ảnh. |
| | Nó trả về và thay đổi giá trị của thuộc tính width của một phần tử HTML hình ảnh. |
| isMap | Nó trả về và sửa đổi xem hình ảnh trong tài liệu HTML có phải là một phần của bản đồ hình ảnh phía máy chủ hay không |
Ví dụ
Hãy để chúng tôi xem một ví dụ về đối tượng hình ảnh HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an image</button>
<script>
function createIframe() {
var x = document.createElement("IMG");
x.setAttribute("src",https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
x.setAttribute("alt", "Learn Servlets");
document.body.appendChild(x);
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Nhấp vào tôi để tạo hình ảnh ”Để tạo phần tử hình ảnh -
