Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie den Attributwert von img in jquery

So ändern Sie den Attributwert von img in jquery

青灯夜游
Freigeben: 2022-05-25 15:30:40
Original
2769 Leute haben es durchsucht

Zwei Möglichkeiten zum Ändern: 1. Verwenden Sie attr(), um den Attributwert zu ändern. Die Syntax lautet „$(“img“).attr({Attribut 1: „Wert“, Attribut 2: „Wert“...} );". 2. Verwenden Sie prop(), um den Attributwert zu ändern. Die Syntax lautet „$(“img“).prop({Attribut 1: „Wert“, Attribut 2: „Wert“...});“.

So ändern Sie den Attributwert von img in jquery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer. Das

So ändern Sie den Attributwert von img in jquery-Tag definiert ein Bild in einer HTML-Seite.

<img src="img/1.jpg" alt="多肉" width="200">
Nach dem Login kopieren

So ändern Sie den Attributwert von img in jquery

So ändern Sie den Attributwert von img in jquery-Tag hat zwei erforderliche Attribute: src und alt. (Die vom img-Tag unterstützten Attribute können unten angezeigt werden.)

Wie kann man also den Attributwert von img mithilfe von JQuery ändern? Hier sind zwei Methoden zum Ändern von Elementattributen.

Methode 1: Verwenden Sie attr(), um den Attributwert zu ändern.

Ändern Sie die Syntax:

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

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

Beispiel: Ändern Sie die Breiten- und Höhenattribute der Attributwert

So ändern Sie den Attributwert von img in jquery Geänderte Syntax:

<!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>
Nach dem Login kopieren
Beispiel: Quell- und Alt-Attribute ändern
//单个属性
$("img").prop("属性名","属性值");
//多个个属性
$("img").prop({属性1:"属性值",属性2:"属性值"....});
Nach dem Login kopieren


Erweitertes Wissen: So ändern Sie den Attributwert von img in jquery Label settable attributes

So ändern Sie den Attributwert von img in jquery

Attribute

WertBeschreibung unten Mitte links lazy: Lazy Loading Gibt an, ob der Browser Bilder sofort oder verzögert laden soll. textPixelHTML5 wird nicht unterstützt. HTML 4.01 ist veraltet. use-credentialsLegen Sie die domänenübergreifenden Attribute des Bildes fest.PixelPixelHTML5 wird nicht unterstützt. HTML 4.01 ist veraltet. spezifiziert Bilder als serverseitige Bildkarten. URLHTML5 wird nicht unterstützt. HTML 4.01 ist veraltet. URL#mapnamePixelHTML5 wird nicht unterstützt. HTML 4.01 ist veraltet. pixels【Empfohlenes Lernen: , Web-Frontend-Video】
ausrichten oben
Richtig
HTML5 wird nicht unterstützt. HTML 4.01 ist veraltet.
Gibt an, wie Bilder relativ zum umgebenden Text angeordnet werden.

Ladeneifrig: Lädt jetzt

alt
Gibt den Alternativtext für das Bild an. Rand
Gibt den Rand um das Bild an. crossoriginanonym

Höhe
Geben Sie die Höhe des Bildes an. hspace
Gibt die Ränder auf der linken und rechten Seite des Bildes an. ismapismap
longdesc
Verweist auf eine URL, die ein langes Bildbeschreibungsdokument enthält. src
Gibt die URL zur Anzeige des Bildes an. usemap
definiert ein Bild als clientseitige Bildkarte. vspace
Gibt den Rand oben und unten im Bild an. width
Gibt die Breite des Bildes an. jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Attributwert von img in jquery. 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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage