Rumah > hujung hadapan web > tutorial js > Bagaimana untuk menetapkan nilai img src dalam javascript

Bagaimana untuk menetapkan nilai img src dalam javascript

青灯夜游
Lepaskan: 2021-11-03 15:34:47
asal
15888 orang telah melayarinya

Kaedah tetapan: 1. Gunakan atribut src objek elemen, sintaks "objek elemen img.src="nilai atribut"" 2. Gunakan kaedah setAttribute(), sintaks "objek elemen img .setAttribute("src ","Nilai atribut")".

Bagaimana untuk menetapkan nilai img src dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Javascript menetapkan nilai img src

Kaedah 1: Gunakan atribut src bagi objek elemen

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk menetapkan nilai img src dalam javascript" >
		<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>
Salin selepas log masuk

Rendering:

Bagaimana untuk menetapkan nilai img src dalam javascript

Kaedah 2: Gunakan kaedah setAttribute()

kaedah setAttribute() untuk menambah atribut spesifikasi dan memberikan nilai yang ditentukan kepadanya. Jika sifat yang dinyatakan ini sudah wujud, nilai hanya ditetapkan/diubah.

<!DOCTYPE html>
<html>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk menetapkan nilai img src dalam javascript" >
		<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>
Salin selepas log masuk

Rendering:

Bagaimana untuk menetapkan nilai img src dalam javascript

[Pembelajaran yang disyorkan: tutorial lanjutan javascript]

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai img src dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan