Bagaimana untuk menukar gaya dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menukar gaya dalam jquery

青灯夜游

Lepaskan： 2023-01-28 16:19:14

asal

10800 orang telah melayarinya

Cara menukar gaya jquery: 1. Gunakan css() untuk menetapkan gaya baharu untuk elemen yang ditentukan Sintaks "$(selector).css({"Attribute name 1":"Nilai atribut. 1" ,"Nama atribut 2":"Nilai atribut 2",...})"; 2. Gunakan attr() untuk menetapkan nilai atribut gaya elemen yang ditentukan, sintaksnya ialah "$(selector).attr( "gaya"," Nama atribut 1: nilai atribut 1; nama atribut 2: nilai atribut 3;...")".

Bagaimana untuk menukar gaya dalam jquery

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

Terdapat dua cara untuk menukar gaya jquery:

Ubah suai melalui kaedah css()
Ubah suai melalui kaedah attr()

Kaedah 1: Gunakan kaedah css()

kaedah css() untuk tetapkan elemen padanan Satu atau lebih atribut gaya.

Hanya gunakan kaedah css() untuk menetapkan gaya baharu

Sintaks:

$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})

Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

Salin selepas log masuk

Bagaimana untuk menukar gaya dalam jquery

Kaedah 2: Gunakan kaedah attr()

kaedah attr() untuk menetapkan atau mengembalikan nilai atribut bagi elemen yang dipilih.

Hanya gunakan kaedah attr() untuk menetapkan nilai atribut gaya elemen.

Sintaks:

$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")

Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

Salin selepas log masuk

Bagaimana untuk menukar gaya dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery , video bahagian hadapan web]

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