Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah gaya dalam jquery

Bagaimana untuk menambah gaya dalam jquery

青灯夜游asal: 2022-05-23 16:14:065712semak imbas

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

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({属性:值,属性:值,...})

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>

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("类名")

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>

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menunjukkan dan menyembunyikan elemen id dalam jqueryArtikel seterusnya：Bagaimana untuk menunjukkan dan menyembunyikan elemen id dalam jquery

Artikel berkaitan

Lihat lagi