JavaScript/jQuery에서 img 요소의 src 속성을 변경하는 방법은 무엇입니까?

JavaScript와 jQuery를 사용하여 HTML 문서에서 요소의 src 속성에 지정된 이미지 경로를 변경하는 다양한 방법이 있습니다.

JavaScript를 사용하여 img 요소의 src 속성을 변경하는 방법−

• JavaScript에서 src 속성을 사용하세요.

jQuery를 사용하여 img 요소의 src 속성을 변경하는 방법−

• attr() 메소드를 사용하세요

• prop() 메서드 사용

위에 나열된 img 요소 src를 변경하는 방법을 하나씩 자세히 논의해 보겠습니다.

JavaScript에서 src 속성 사용

JavaScript를 사용하면 src 속성을 사용하여 할당된 값을 가져오고 동일한 속성의 값을 업데이트하거나 변경할 수도 있습니다. 이는 img 요소의 src 속성 값을 변경하는 매우 일반적인 방법입니다.

구문

다음 구문은 JavaScript에서 src 속성을 사용하여 img 요소의 src 속성 값을 변경하는 방법을 설명합니다. -

으아악

코드 예제를 통해 이 접근 방식의 실제 구현을 이해해 보겠습니다.

알고리즘

• 1단계 − 첫 번째 단계에서는 src 속성이 연결된 img 요소를 추가합니다. 이 값은 나중에 JavaScript의 src 속성을 사용하여 변경됩니다.

• 2단계 - 이 단계에서는 onclick 이벤트가 포함된 버튼 요소를 추가하고 사용자가 버튼을 클릭할 때 이미지의 src를 변경하는 함수를 호출합니다.

• 3단계 - 다음 단계에서는 ID를 사용하여 img 요소를 가져온 다음 src 속성을 사용하여 src 속성을 변경하고 두 이미지 간에 전환하는 JavaScript 함수를 정의합니다.

• 4단계 − 마지막 단계에서는 마지막 단계에서 정의한 onclick 이벤트에 함수를 할당하여 사용자 화면에서 변경 사항을 확인합니다.

Example

의 중국어 번역은 다음과 같습니다:

Example

다음 예에서는 실제로 JavaScript에서 src 속성을 사용하여 img의 src 속성을 변경하는 방법을 설명합니다.

으아악

이 예에서는 JavaScript의 src 속성을 사용하여 HTML 문서에 있는 img 요소의 src 속성을 변경합니다. 여기서는 버튼을 클릭할 때마다 두 이미지 사이를 전환합니다.

jQuery에서 attr() 메소드 사용하기

JavaScript의 attr() 메서드를 사용하여 src 속성을 변경할 수도 있습니다.

attr() 메소드 - attr() 메소드는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 문자열로 표현되는 변경될 속성의 이름이고, 다른 매개변수는 속성에 할당될 새 값입니다.

구문

다음 구문은 매개변수가 있는 attr() 메서드가 구현되는 방법을 설명합니다. −

으아악

코드 예제를 통해 이 접근 방식의 구현을 자세히 이해해 보겠습니다.

알고리즘

• 단계 - 문서의

  요소, <script> 요소 내에 jQuery 링크 <src>를 추가합니다. </script>

• 2단계 - 이 단계에서는 src 속성이 있는 img 요소를 사용하고 나중에 jQuery의 attr() 메서드를 사용하여 수정합니다.

• 3단계 - 세 번째 단계에서는 나중에 onclick 이벤트와 jQuery를 사용하는 함수를 제공할 버튼 요소를 추가합니다.

• 4단계 − 다음 단계에서는 jQuery의 “$” 구문을 사용하여 각 요소를 가져오고 각 요소에 대한 작업을 수행합니다.

• 5단계 − 마지막 단계에서는 jQuery의 on() 메서드를 사용하여 버튼에 onclick 이벤트를 할당합니다. 그러면 사용자가 버튼을 클릭하면 버튼에 제공된 함수가 호출되고 사용자에게 표시됩니다.

Example

의 중국어 번역은 다음과 같습니다:

Example

다음 예에서는 img 요소의 src 속성을 변경하기 위해 jQuery에서 attr() 메서드를 사용하는 방법을 보여줍니다.

으아악

jQuery에서 prop() 메소드를 사용하세요

attr() 메서드와 유사하게 jQuery는 속성 값을 새 값으로 변경하는 prop() 메서드도 제공합니다.

prop() 메서드 − 이전 예제에서 attr() 메서드를 사용한 것처럼 prop() 메서드를 사용할 수 있습니다. 속성 이름과 새 값을 매개 변수로 할당합니다.

prop() 메소드를 사용하여 단일 속성과 다중 속성에 값을 설정할 수 있습니다.

구문

다음 구문은 다양한 목적으로 prop() 메서드를 사용하는 방법을 보여줍니다. −

특정 속성의 값 변경 − 으아악

여러 속성의 값 변경 − 으아악

두 번째 구문에서는 여러 속성에 새로운 값을 동시에 제공합니다.

코드 예제를 통해 prop() 메소드의 사용법을 자세히 살펴보겠습니다.

알고리즘

이 예제의 알고리즘은 이전 예제의 알고리즘과 거의 유사합니다. 이전 알고리즘의 attr() 메서드를 prop() 메서드로 바꾸면 작업이 완료됩니다.

Example

의 중국어 번역은 다음과 같습니다:

Example

다음 예에서는 prop() 메서드가 HTML 문서에서 img 요소의 src 속성 값을 변경하는 방법을 설명합니다. -

으아악

위 예에서는 HTML 문서에 있는 img 요소의 src 속성을 변경하기 위해 jQuery의 prop() 메서드를 사용했습니다.

이 글에서는 JavaScript와 jQuery를 사용하여 img 요소의 src 속성 값을 변경하는 세 가지 방법에 대해 논의했습니다. 모든 메소드를 코드 예제 내에서 실제로 구현하여 자세히 이해했으며, 이는 개념에 대한 실무 지식을 쌓는 데 도움이 됩니다.

위 내용은 JavaScript/jQuery에서 img 요소의 src 속성을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!