[DOM]JavaScript로 이미지 조작하기

이미지 태그 선택

먼저, JavaScript를 사용하여 HTML 이미지 태그를 조작하려면 해당 이미지 태그를 선택해야 합니다. 아래의 코드는 이미지 태그를 #Image ID로 선택합니다.

let image = document.querySelector("#Image");

이미지 속성 변경

선택한 이미지 태그의 속성을 변경할 수 있습니다. 아래의 코드는 이미지의 src,width,height 속성을 변경하여 이미지를 빈이미지로 설정하고 크기를 조정합니다.

image.src = "http://placehold.it/300x200"; // 빈 이미지
image.width = "300";
image.height = "200";

이러한 방식으로 JavaScript를 사용하여 이미지를 동적으로 변경할 수 있으며, 웹페이지에서 이미지를 다루는 다양한 상황에 활용하 수 있습니다.