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

Bagaimana untuk menambah gaya dalam jquery

青灯夜游

Lepaskan： 2022-05-23 16:14:06

asal

5764 orang telah melayarinya

Dua cara untuk menambah: 1. Gunakan css() untuk menetapkan satu atau lebih atribut gaya, sintaksnya ialah "element object.css({attribute: value, attribute: value,...})". 2. Gunakan addClass() untuk menambah kelas gaya yang ditentukan, sintaksnya ialah "elemen object.addClass("class name")".

Bagaimana untuk menambah gaya dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Jika anda ingin menambah gaya menggunakan jquery, anda boleh:

Gunakan css() untuk menetapkan satu atau lebih atribut gaya
Gunakan addClass() untuk menambah berbilang kelas gaya yang ditetapkan

1. Gunakan css()

css() kaedah untuk memilih elemen Tetapkan satu atau lebih sifat gaya.

$(selector).css({属性:值,属性:值,...})

Salin selepas log masuk

Contoh 1:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").css({
						"color": "white",
						"background-color": "#98bf21",
						"font-family": "Arial",
						"font-size": "20px",
						"padding": "5px"
					});
				});
			});
		</script>
	</head>
	<body>

		<button>给P元素添加多个样式</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menambah gaya dalam jquery

Seperti yang anda boleh lihat, gaya warna fon, gaya warna latar belakang dan saiz fon gaya telah ditambah, gaya padding.

2. Gunakan kaedah addClass()

addClass() untuk menambah satu atau lebih nama kelas pada elemen yang dipilih.

Kaedah ini tidak mengalih keluar atribut kelas sedia ada, tetapi hanya menambah satu atau lebih nama kelas pada atribut kelas.

$(selector).addClass("类名")

Salin selepas log masuk

Petua: Jika anda perlu menambah berbilang kelas, sila gunakan ruang untuk mengasingkan nama kelas.

Contoh 2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").addClass("intro note");
				});
			});
		</script>
		<style>
			.intro {
				font-size: 30px;
				color: blue;
			}

			.note {
				background-color: yellow;
			}
		</style>
	</head>
	<body>

		<button>给P元素添加多个样式</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menambah gaya dalam jquery

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

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