목차
<img> 객체 정의 - 이미지 <img> 객체 구문 <img> 객체 예제 - 접근 <img> 객체 예제 - 생성 <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> 객체는 표준 속성/메서드 /이벤트 지원.
