Comment changer la valeur de l'attribut img dans jquery-Questions et réponses frontales-php.cn

Comment changer la valeur de l'attribut img dans jquery

青灯夜游

Libérer： 2022-05-25 15:30:40

original

2734 Les gens l'ont consulté

Deux façons de changer : 1. Utilisez attr() pour modifier la valeur de l'attribut, la syntaxe est "$("img").attr({Attribut 1 : "Valeur", Attribut 2 : "Valeur"...} );". 2. Utilisez prop() pour modifier la valeur de l'attribut, la syntaxe est "$("img").prop({Attribute 1 : "Value", Attribute 2 : "Value"...});".

Comment changer la valeur de l'attribut img dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3. La balise

Comment changer la valeur de l'attribut img dans jquery définit une image dans une page HTML. La balise

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

Copier après la connexion

Comment changer la valeur de lattribut img dans jquery

Comment changer la valeur de l'attribut img dans jquery a deux attributs obligatoires : src et alt. (Les attributs pris en charge par la balise img peuvent être consultés ci-dessous)

Alors, comment changer la valeur de l'attribut img à l'aide de jquery ? Voici deux méthodes pour modifier les attributs des éléments.

Méthode 1 : utilisez attr() pour modifier la valeur de l'attribut

Modifiez la syntaxe :

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

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

Copier après la connexion

Exemple : modifiez les attributs de largeur et de hauteur

<!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>

Copier après la connexion

Comment changer la valeur de lattribut img dans jquery

Méthode 2 : utilisez prop() pour modifier la valeur de l'attribut

Syntaxe modifiée :

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

Copier après la connexion

Exemple : Modifier les attributs src et 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>

Copier après la connexion

Comment changer la valeur de lattribut img dans jquery

Connaissances étendues :

ValeurDescription en bas milieu gauche lazy : chargement paresseux Spécifie si le navigateur doit charger les images immédiatement ou paresseusement. textpixelsHTML5 non pris en charge. HTML 4.01 est obsolète. use-credentialsDéfinissez les attributs inter-domaines de l'imagepixelspixelsHTML5 non pris en charge. HTML 4.01 est obsolète. spécifie les images sous forme de cartes d'images côté serveur. URLHTML5 n'est pas pris en charge. HTML 4.01 est obsolète. URL#mapnamepixelsHTML5 non pris en charge. HTML 4.01 est obsolète. pixels【Apprentissage recommandé : , Vidéo web front-end】

	aligner	top
C'est vrai	HTML5 n'est pas pris en charge. HTML 4.01 est obsolète. Spécifie la manière dont les images sont disposées par rapport au texte environnant.	loadingimpatient : Chargement maintenant
	alt
Spécifie le texte alternatif de l'image.	border
	Spécifie la bordure autour de l'image.	crossoriginanonyme
	hauteur
Spécifiez la hauteur de l'image.	hspace
	Spécifie les marges sur les côtés gauche et droit de l'image.	ismapismap
	longdesc
	Pointe vers une URL qui contient un long document de description d’image.	src
Spécifie l'URL pour afficher l'image.	usemap
définit une image comme une image cliquable côté client.	vspace
	Spécifie la marge en haut et en bas de l'image.	width
Spécifie la largeur de l'image.		Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!