[HTML_Objects] JS - <img> 객체 ★ - 사진/그림/이미지 (= img태그 = 이미지태그)

1. <img> 객체 정의 - 이미지
2. <img> 객체 구문
3. <img> 객체 예제 - 접근
4. <img> 객체 예제 - 생성
5. <img> 객체 속성

<img> 객체 정의 - 이미지

 

HTML <img> 태그(요소) 의미.

 

<img> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

또는,

var x = document.images

 

[생성]

var x = document.createElement("IMG");

 

<img> 객체 예제 - 접근

 

<img id="hz" src="https://source.unsplash.com/random" alt="랜덤짤" width="304" height="228">

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").src;

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

<img> 객체 예제 - 생성

 

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.createElement("IMG");

  x.setAttribute("src", "https://source.unsplash.com/random");

  x.setAttribute("width", "304");

  x.setAttribute("height", "228");

  x.setAttribute("alt", "랜덤짤");

  document.body.appendChild(x);

}

</script> 

 

결과보기 

<img> 객체 속성

 

align

HTML5 제외. 대신 style.cssFloat 속성 사용.

이미지의 align 속성값 설정/반환.

 

alt

이미지의 alt 속성값 설정/반환.

 

border

HTML5 제외. 대신 style.border 사용.

이미지의 border 속성값 설정/반환.

 

complete

브라우저가 이미지로드 완료했는지 여부 반환.

 

crossOrigin

이미지의 CORS 설정을 설정/반환.

 

height

이미지의 height 속성값 설정/반환.

 

hspace

HTML5 제외. 대신 style.margin 속성 사용.

이미지의 hspace 속성값 설정/반환.

 

isMap

이미지가 서버 측 이미지 맵의 일부여야하는지 여부 설정/반환.

 

longDesc

HTML5 제외.

이미지의 longdesc 속성값 설정/반환.

 

lowsrc 

HTML5 제외.

URL을 저해상도 버전의 이미지로 설정/반환.

 

name

HTML5 제외. 대신 id 사용.

이미지의 name 속성값 설정/ 반환.

 

naturalHeight

이미지의 원래 높이 반환.

 

naturalWidth

이미지의 원래 너비 반환.

 

src

이미지의 src 속성값 설정/반환.

 

useMap

이미지의 usemap 속성값 설정/반환.

 

vspace

HTML5 제외. 대신 style.margin 속성 사용.

이미지의 vspace 속성값 설정/반환.

 

width

이미지의 width 속성값 설정/반환. 

 

※ <img> 객체는 표준 속성/메서드/이벤트 지원.