HTML DOM 이미지 객체

<시간/>

HTML DOM 이미지 개체는 HTML 문서의 요소를 나타냅니다.

img 객체를 만들어 봅시다 -

구문

다음은 구문입니다 -

document.createElement(“IMG”);

속성

다음은 이미지 개체의 속성입니다 -

속성	설명
alt	이미지 HTML 요소의 alt 속성 값을 반환하고 수정합니다.
완료	브라우저가 HTML 웹 페이지에서 이미지 로드를 완료했는지 여부를 반환합니다.
crossOrigin	이미지 HTML 요소의 CROS 설정을 반환하고 수정합니다.
높이	이미지 HTML 요소의 높이 속성 값을 반환하고 수정합니다.
자연 높이	HTML 문서에서 이미지의 자연 높이를 반환합니다.
자연폭	HTML 문서에서 이미지의 자연 너비를 반환합니다.
src	이미지 HTML 요소의 src 속성 값을 반환하고 수정합니다.
맵 사용	이미지 HTML 요소의 useMap 속성 값을 반환하고 변경합니다.
너비	이미지 HTML 요소의 너비 속성 값을 반환하고 변경합니다.
isMap	HTML 문서의 이미지가 서버 측 이미지 맵의 일부인지 여부를 반환하고 수정합니다.

예시

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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 이미지 객체

"이미지를 만들려면 클릭하세요를 클릭합니다. ” 버튼으로 이미지 요소 생성 -

HTML DOM 이미지 객체