Maison > Article > interface Web > Comment changer la valeur de l'attribut img dans jquery

Comment changer la valeur de l'attribut img dans jquery

青灯夜游original: 2022-05-25 15:30:402662parcourir

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"...});".

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

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:"属性值"....});

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>

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:"属性值"....});

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>

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!

jquery html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer tous les éléments li dans jqueryArticle suivant：Comment supprimer tous les éléments li dans jquery

Articles Liés

Voir plus