cari

Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menukar nilai atribut img dalam jquery

Bagaimana untuk menukar nilai atribut img dalam jquery

青灯夜游
青灯夜游asal
2022-05-25 15:30:402764semak imbas

Dua cara untuk menukar: 1. Gunakan attr() untuk mengubah suai nilai atribut, sintaks "$("img").attr({Attribute 1: "value", Attribute 2: "value". ..} );". 2. Gunakan prop() untuk mengubah suai nilai atribut, sintaksnya ialah "$("img").prop({Atribut 1: "Nilai", Atribut 2: "Nilai"...});".

Bagaimana untuk menukar nilai atribut img dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3. Teg

Bagaimana untuk menukar nilai atribut img dalam jquery mentakrifkan imej dalam halaman HTML. Teg 

<img src="img/1.jpg" alt="多肉" width="200">

Bagaimana untuk menukar nilai atribut img dalam jquery

Bagaimana untuk menukar nilai atribut img dalam jquery mempunyai dua atribut yang diperlukan: src dan alt. (Atribut yang disokong oleh tag img boleh dilihat di bawah)

Jadi bagaimana untuk menukar nilai atribut img menggunakan jquery? Berikut ialah dua kaedah untuk mengubah suai atribut elemen.

Kaedah 1: Gunakan attr() untuk mengubah suai nilai atribut

Ubah suai sintaks: 

//单个属性
$("img").attr("属性名","属性值");

//多个个属性
$("img").attr({属性1:"属性值",属性2:"属性值"....});

Contoh: Ubah suai atribut lebar dan tinggi 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").attr({width:"400",height":"320"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="200"    style="max-width:90%"><br><br>
		<button>修改width和height属性值</button>
	</body>

</html>

Bagaimana untuk menukar nilai atribut img dalam jquery

Kaedah 2: Gunakan prop() untuk mengubah suai nilai atribut

Ubah suai sintaks : 

//单个属性
$("img").prop("属性名","属性值");
//多个个属性
$("img").prop({属性1:"属性值",属性2:"属性值"....});

Contoh: Ubah suai atribut src dan alt

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").prop({src:"img/4.jpg",alt:"晚霞"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="300"><br><br>
		<button>修改src和alt属性</button>
	</body>

</html>

Bagaimana untuk menukar nilai atribut img dalam jquery

Pengetahuan lanjutan: Bagaimana untuk menukar nilai atribut img dalam jquery boleh ditetapkan oleh tag

Atribut Nilai Penerangan
align top
属性 值 描述
align top
     bottom
     middle
     left
     right		 HTML5 不支持。HTML 4.01 已废弃。    规定如何根据周围的文本来排列图像。
loading eager：立即加载
     lazy：延迟加载		 指定浏览器是应立即加载图像还是延迟加载图像。
alt text 规定图像的替代文本。
border pixels HTML5 不支持。HTML 4.01 已废弃。    规定图像周围的边框。
crossorigin anonymous
use-credentials		 设置图像的跨域属性
height pixels 规定图像的高度。
hspace pixels HTML5 不支持。HTML 4.01 已废弃。    规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL HTML5 不支持。HTML 4.01 已废弃。    指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace pixels HTML5 不支持。HTML 4.01 已废弃。    规定图像顶部和底部的空白。
width pixels 规定图像的宽度。
bawah

tengah kiri Kanan

 HTML5 tidak disokong. HTML 4.01 tidak digunakan lagi. Menentukan cara imej disusun berbanding dengan teks sekeliling.
memuatkan bersemangat: Muatkan segera malas: Lazy loading Menentukan sama ada penyemak imbas harus memuatkan imej dengan segera atau malas.
alt teks Peruntukan Teks alternatif untuk imej.
sempadan piksel HTML5 tidak disokong. HTML 4.01 tidak digunakan lagi. Menentukan sempadan di sekeliling imej.
crossorigin tanpa nama use-credentials Tetapkan atribut merentas domain imej
tinggi piksel Menentukan ketinggian imej.
hspace piksel HTML5 tidak disokong. HTML 4.01 ditamatkan. Menentukan jidar di sebelah kiri dan kanan imej.
ismap ismap Menentukan imej sebagai bahagian pelayan peta imej.
longdesc URL HTML5 tidak disokong. HTML 4.01 ditamatkan. Menuding ke URL yang mengandungi dokumen perihalan imej yang panjang.
src URL Peruntukan Memaparkan URL imej.
peta guna #mapname Tentukan imej sebagai peta imej sebelah pelanggan.
vspace piksel HTML5 tidak disokong. HTML 4.01 ditamatkan. Menentukan margin di bahagian atas dan bawah imej.
lebar piksel Peruntukan Lebar imej.
[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

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

jquery html
Kenyataan：
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
Artikel sebelumnya：Bagaimana untuk memadam semua elemen li dalam jqueryArtikel seterusnya：Bagaimana untuk memadam semua elemen li dalam jquery

Artikel berkaitan

Lihat lagi