집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 img src 값을 설정하는 방법

자바스크립트에서 img src 값을 설정하는 방법

青灯夜游원래의: 2021-11-03 15:34:4715887검색

설정 방법: 1. 요소 개체의 src 속성을 사용하고 "img element object.src="attribute value"" 구문을 사용합니다. 2. setAttribute() 메서드를 사용하고 "img element object.setAttribute(" 구문을 사용합니다. src","속성값")".

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript는 img src 값을 설정합니다

방법 1: 요소 객체의 src 속성 사용

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="자바스크립트에서 img src 값을 설정하는 방법" >
		<p id="demo">点击按钮来改变img标签的内容。</p>
		<button onclick="myFunction()">试一下</button>

		<script>
			function myFunction() {
				var img = document.getElementsByTagName("img")[0];
				img.src = "img/2.jpg";
			}
		</script>
	</body>
</html>

렌더링:

자바스크립트에서 img src 값을 설정하는 방법

방법 2: setAttribute() 사용 방법

setAttribute() 메소드는 지정된 속성을 추가하고 지정된 값을 할당합니다. 지정된 속성이 이미 존재하는 경우 값은 설정/변경만 됩니다.

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="자바스크립트에서 img src 값을 설정하는 방법" >
		<p id="demo">点击按钮来改变img标签的内容。</p>
		<button onclick="myFunction()">试一下</button>

		<script>
			function myFunction() {
				var img = document.getElementsByTagName("img")[0];
				img.setAttribute("src","img/3.jpg"); 
			}
		</script>
	</body>
</html>

렌더링:

자바스크립트에서 img src 값을 설정하는 방법

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 img src 값을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트 문자열에서 공백을 제거하는 방법다음 기사：자바스크립트 문자열에서 공백을 제거하는 방법