자바스크립트에서 img src 값을 설정하는 방법-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-11-03 15:34:47

원래의

15710명이 탐색했습니다.

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

자바스크립트에서 img 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 값을 설정하는 방법