Rumah > Artikel > hujung hadapan web > Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

青灯夜游asal: 2022-05-11 20:17:244039semak imbas

Kaedah untuk gaya pengendalian: 1. css(), tetapkan atribut gaya elemen; 2. ketinggian(), tetapkan ketinggian elemen; ; 4. scrollLeft() , tetapkan offset elemen relatif ke sebelah kiri bar skrol (), tetapkan offset elemen relatif ke bahagian atas bar skrol; mengendalikan gaya dengan mengawal id, kelas dan atribut gaya elemen 7. prop(), mengendalikan gaya dengan mengawal gaya dan atribut lain bagi elemen;

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

Cara jquery mengendalikan gaya elemen secara langsung

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

1 Kembalikan sintaks nilai atribut CSS:

Tetapkan sintaks atribut CSS:

$(selector).css(name)

$(selector).css(name,value)

Sintaks untuk menetapkan ketinggian:

3 lebar()

$(selector).height()

Sintaks untuk mengembalikan lebar:

$(selector).height(length)

Sintaks untuk tetapan lebar:

Contoh: Manipulasi gaya elemen--ubah suai lebar elemen

$(selector).width()

$(selector).width(length)

2. Gunakan kaedah css()

<!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").width("200px");
				});
			});
		</script>
	</head>
	<body>

		<img  src="1.jpg"    style="max-width:90%"/ alt="Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?" ><br>
		<button>修改元素的宽度</button>
	</body>
</html>

Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

Cara jquery secara tidak langsung mengendalikan gaya elemen

$(document).ready(function() {
	$("button").click(function() {
	 $("img").css("width","250px");
	});
});

Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

Dalam jquery, anda secara tidak langsung boleh mengendalikan gaya elemen dengan mengendalikan atribut elemen.

Contoh: Gunakan attr() untuk menambah gaya Apabila anda menggunakan kaedah attr() untuk menetapkan atribut gaya elemen, anda boleh menambah gaya css pada elemen.

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
prop()	设置或返回被选元素的属性/值
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。

[Pembelajaran yang disyorkan:

tutorial video jQuery

<!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() {
					// $("div").attr({"style":"border: 5px solid paleturquoise;"});
					$("div").attr("style", "border: 5px solid paleturquoise;width: 200px;");
				});
			});
		</script>
	</head>
	<body>

		<div>hello</div>
		<br>
		<button>给div元素添加css样式</button>

	</body>
</html>

video pengenalan bahagian hadapan web

] Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

Atas ialah kandungan terperinci Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css class position

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 menyembunyikan elemen induk dalam jqueryArtikel seterusnya：Bagaimana untuk menyembunyikan elemen induk dalam jquery

Artikel berkaitan

Lihat lagi