JavaScript를 사용하여 이미지 태그의 소스 URL을 어떻게 동적으로 업데이트합니까?

JavaScript를 사용하여 이미지의 소스 URL 변경

JavaScript를 사용하여 이미지 태그의 소스 URL을 동적으로 업데이트하려면 다음 사항을 확인하는 것이 중요합니다. 이벤트 리스너 및 요소의 적절한 처리 식별.

해결책:

1. img 태그에 ID 추가:
   고유 ID 할당 img 태그입니다. 이는 JavaScript 코드에서 구체적으로 대상을 지정하는 데 도움이 됩니다.

   <code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>

2. 이미지 요소에 액세스:
   document.getElementById() 메소드를 사용하여 img에 대한 참조 얻기 요소.

   <code class="javascript">var editSave = document.getElementById("edit-save");</code>

3. src 속성 변경:
   이미지 요소 참조가 있으면 해당 src 속성을 수정하여 이미지를 업데이트할 수 있습니다. source.

   <code class="javascript">editSave.src = "../template/save.png";</code>

예:

제공된 코드에 다음과 같이 ID를 추가하세요.

<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>

그런 다음 JavaScript 기능을 수정하세요.

<code class="javascript">function edit() {
    var editSave = document.getElementById("edit-save");
    editSave.src = "../template/save.png";
}</code>

이것을 사용하여 접근 방식을 사용하면 이미지를 한 번 클릭하면 이미지 소스가 올바르게 업데이트됩니다.

위 내용은 JavaScript를 사용하여 이미지 태그의 소스 URL을 어떻게 동적으로 업데이트합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!