✔ 이미지 태그 요소 접근 방법
document.getElementXXX()또는document.querySelector()등의 메서드 사용
⭐ div 영역에 텍스트 출력
<script>
function func() {
document.querySelector("#infoArea").innerHTML = "확인";
}
</script>
<body>
<img src="1.jpg" alt="펭수없음" title="펭수1" width="150" height="150"><br>
<button onclick="func()">확인</button>
<div id="infoArea"></div>
</body>📌 출력
확인버튼 클릭 시 div 영역에 확인 글자 출력됨
이미지 태그에 지정된 name 속성값으로 접근
-
document.name속성값.속성명-> 지정된 name 속성값에 해당하는 대상 요소의 특정 속성에 접근
⭐ img 태그에 접근하여 해당 태그의 속성값 출력
<script>
function func() {
document.querySelector("#infoArea").innerHTML =
"src = " + document.img1.src + "<br>" +
"width = " + document.img1.width + "<br>" +
"height = " + document.img1.height + "<br>";
}
</script>
<body>
<img src="1.jpg" alt="펭수없음" title="펭수1" width="150" height="150" name="img1"><br>
<button onclick="func()">이미지 속성 정보</button>📌 출력
이미지 태그 전체를 배열 형태로 접근
-
document.images[인덱스].속성명-> 복수 개의 이미지 중 인덱스에 해당하는 이미지 속성에 접근
⭐ 배열 형식을 사용하여 img 태그에 접근
<script>
function func() {
document.querySelector("#infoArea").innerHTML =
"src = " + document.images[0].src + "<br>" +
"width = " + document.images[0].width + "<br>" +
"height = " + document.images[0].height + "<br>";
}
</script>
<body>
<img src="1.jpg" alt="펭수없음" title="펭수1" width="150" height="150" name="img1"><br>
<button onclick="func()">이미지 속성 정보</button>📌 출력
⭐ 이미지 정보 변경
<script>
function func() {
document.images[0].src = "2.jpg";
document.images[0].width = "300";
document.images[0].height = "250";
}
</script>
<body>
<img src="1.jpg" alt="펭수없음" title="펭수1" width="150" height="150" name="img1"><br>
<button onclick="func()">이미지 속성 정보 변경</button>📌 출력
이미지 속성정보 변경버튼 클릭 시 사진 변경됨
개발자가 되었어요⭐️