자바스크립트로 HTML img 태그의 src 속성 값 가져오기 및 설정하기

자바스크립트를 사용하여 HTML img 태그의 src 속성 값을 가져오거나 설정하는 것은 매우 간단합니다. 이 글에서는 이를 수행하는 방법을 단계별로 설명합니다.

1. HTML 구조

먼저, 예제를 위해 간단한 HTML 구조를 만들어봅시다. img 태그와 이를 제어하기 위한 버튼을 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 src 속성 제어</title>
</head>
<body>
    <h1>이미지 src 속성 제어</h1>
    <img id="myImage" src="https://via.placeholder.com/150" alt="예제 이미지">
    <br>
    <button onclick="getImageSrc()">이미지 src 가져오기</button>
    <button onclick="setImageSrc()">이미지 src 변경하기</button>

    <script src="script.js"></script>
</body>
</html>

2. 자바스크립트 코드

HTML 파일과 같은 디렉토리에 script.js 파일을 생성하고, 아래의 코드를 추가합니다.

2.1. 이미지 src 속성 값 가져오기

getImageSrc 함수는 img 태그의 src 속성 값을 가져와서 콘솔에 출력합니다.

function getImageSrc() {
    // img 태그를 선택
    var imgElement = document.getElementById('myImage');

    // src 속성 값을 가져옴
    var imgSrc = imgElement.src;

    // 콘솔에 출력
    console.log('현재 이미지 src:', imgSrc);
}

2.2. 이미지 src 속성 값 설정하기

setImageSrc 함수는 img 태그의 src 속성 값을 새로운 URL로 변경합니다.

function setImageSrc() {
    // img 태그를 선택
    var imgElement = document.getElementById('myImage');

    // 새로운 이미지 URL 설정
    var newSrc = 'https://via.placeholder.com/300';

    // src 속성 값을 새로운 값으로 변경
    imgElement.src = newSrc;

    // 변경된 src 값을 콘솔에 출력
    console.log('새로운 이미지 src:', imgElement.src);
}

3. 전체 코드 정리

3.1. HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 src 속성 제어</title>
</head>
<body>
    <h1>이미지 src 속성 제어</h1>
    <img id="myImage" src="https://via.placeholder.com/150" alt="예제 이미지">
    <br>
    <button onclick="getImageSrc()">이미지 src 가져오기</button>
    <button onclick="setImageSrc()">이미지 src 변경하기</button>

    <script src="script.js"></script>
</body>
</html>

3.2. 자바스크립트 파일 (`script.js`)

function getImageSrc() {
    // img 태그를 선택
    var imgElement = document.getElementById('myImage');

    // src 속성 값을 가져옴
    var imgSrc = imgElement.src;

    // 콘솔에 출력
    console.log('현재 이미지 src:', imgSrc);
}

function setImageSrc() {
    // img 태그를 선택
    var imgElement = document.getElementById('myImage');

    // 새로운 이미지 URL 설정
    var newSrc = 'https://via.placeholder.com/300';

    // src 속성 값을 새로운 값으로 변경
    imgElement.src = newSrc;

    // 변경된 src 값을 콘솔에 출력
    console.log('새로운 이미지 src:', imgElement.src);
}

이제 브라우저에서 HTML 파일을 열면, 버튼을 클릭하여 이미지의 src 속성 값을 가져오고 변경할 수 있습니다. 콘솔 로그를 통해 현재와 변경된 src 값을 확인할 수 있습니다.

저작자표시