Heim > Web-Frontend > js-Tutorial > So ändern Sie die Bildadresse mit Javascript

So ändern Sie die Bildadresse mit Javascript

青灯夜游
Freigeben: 2022-01-19 11:57:12
Original
8149 Leute haben es durchsucht

So ändern Sie die Bildadresse in JavaScript: 1. Verwenden Sie die Anweisung „document.getElementById(„id“)“, um das Bildobjekt gemäß dem angegebenen ID-Wert abzurufen. 2. Verwenden Sie „image object.setAttribute(“src“ ,"neue Bildadresse") ;" Anweisung zum Ändern der Bildadresse.

So ändern Sie die Bildadresse mit Javascript

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

Javascript-Methode zum Ändern der Bildadresse

Implementierungsidee:

  • Zuerst das IMG-Bildobjekt abrufen (So ändern Sie die Bildadresse mit Javascript-Tag definiert das Bild auf der HTML-Seite.)

  • Dann das setAttribute verwenden ()-Methode Setzen Sie einfach den Wert des src-Attributs zurück (das src-Attribut des img-Tags gibt die URL des Bildes an.) Die

setAttribute()-Methode 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.

Implementierungscode:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img  id="img" src="img/3.jpg"    style="max-width:90%"/ alt="So ändern Sie die Bildadresse mit Javascript" ><br>
		<button onclick="myFunction()">更改图片地址</button>
		<script>
			function myFunction() {
				var img=document.getElementById("img");
				img.setAttribute("src","img/4.jpg");
			}
		</script>
	</body>
</html>
Nach dem Login kopieren

So ändern Sie die Bildadresse mit Javascript

[Verwandte Empfehlungen: Javascript-Lern-Tutorial]

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildadresse mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage