So legen Sie den IMG-SRC-Wert in Javascript fest-js-Tutorial-php.cn

So legen Sie den IMG-SRC-Wert in Javascript fest

青灯夜游

Freigeben： 2021-11-03 15:34:47

Original

15749 Leute haben es durchsucht

Einstellungsmethode: 1. Verwenden Sie das src-Attribut des Elementobjekts, die Syntax „img element object.src="attribute value"“ 2. Verwenden Sie die setAttribute()-Methode, die Syntax „img element object.setAttribute(“ src“, „Attributwert“)“.

So legen Sie den IMG-SRC-Wert in Javascript fest

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript legt den img-src-Wert fest

Methode 1: Verwendung des src-Attributs des Elementobjekts

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="So legen Sie den IMG-SRC-Wert in Javascript fest" >
		<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>

Nach dem Login kopieren

Rendering:

So legen Sie den IMG-SRC-Wert in Javascript fest

Methode 2: Verwendung des. setAttribute () Methode

Die Methode setAttribute( ) fügt das angegebene Attribut hinzu und weist ihm den angegebenen Wert zu. Wenn diese angegebene Eigenschaft bereits vorhanden ist, wird der Wert nur gesetzt/geändert.

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="So legen Sie den IMG-SRC-Wert in Javascript fest" >
		<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>

Nach dem Login kopieren

Rendering:

So legen Sie den IMG-SRC-Wert in Javascript fest

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo legen Sie den IMG-SRC-Wert in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!