So stellen Sie sicher, dass sich das Hintergrundbild in JQuery nicht wiederholt-Front-End-Fragen und Antworten-php.cn

So stellen Sie sicher, dass sich das Hintergrundbild in JQuery nicht wiederholt

青灯夜游

Freigeben： 2022-06-10 15:25:28

Original

3059 Leute haben es durchsucht

Zwei Möglichkeiten, das Hintergrundbild nicht wiederholbar zu machen: 1. Verwenden Sie css(), um dem Element das Attribut „background-repeat“ hinzuzufügen. Die Syntax lautet „$(“angegebenes Element“).css(“background-repeat“, „keine Wiederholung“)“. 2. Verwenden Sie attr(), um dem Element den Hintergrundwiederholungsstil hinzuzufügen. Die Syntax lautet „$(„angegebenes Element“).attr(„Stil“, „Hintergrundwiederholung: keine Wiederholung“)“.

So stellen Sie sicher, dass sich das Hintergrundbild in JQuery nicht wiederholt

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.0-Version, Dell G3-Computer.

? passendes Element. Verwenden Sie einfach diese Methode, um dem Element das Attribut „background-repeat“ hinzuzufügen und den Attributwert auf „no-repeat“ zu setzen.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").css("background-repeat","no-repeat");
				});
			});
		</script>
		<style>
			div{
			  height: 150px;
			  background-image: url(img/nz.png);
			  }
		</style>
	</head>
	<body>

		<div></div>
		<br>
		<button>让背景图片不重复</button>
	</body>
</html>

Nach dem Login kopieren

Methode 2: Verwenden Sie attr(), um das Stilattribut festzulegen und den Hintergrundwiederholungsstil hinzuzufügen. Die Methode

attr() kann den Attributwert des ausgewählten Elements festlegen. Verwenden Sie einfach diese Methode, um das Stilattribut des Elements festzulegen und den Attributwert auf „background-repeat:no-repeat“ zu setzen.

Kerncode implementieren:

So stellen Sie sicher, dass sich das Hintergrundbild in JQuery nicht wiederholt

$(document).ready(function() {
	$("button").click(function() {
		$("div").attr("style","background-repeat:no-repeat");
	});
});

Nach dem Login kopieren

[Empfohlenes Lernen:
jQuery-Video-Tutorial

Web-Front-End-Video

]

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass sich das Hintergrundbild in JQuery nicht wiederholt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!