Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?-Soal Jawab bahagian hadapan-php.cn

Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

青灯夜游

Lepaskan： 2022-06-06 14:17:49

asal

4086 orang telah melayarinya

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;

Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?

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)

Salin selepas log masuk

$(selector).css(name,value)

Salin selepas log masuk

Sintaks untuk menetapkan ketinggian:

3 lebar()

$(selector).height()

Salin selepas log masuk

Sintaks untuk mengembalikan lebar:

$(selector).height(length)

Salin selepas log masuk

<🎜. >

Sintaks untuk tetapan lebar:

Contoh: Manipulasi gaya elemen--ubah suai lebar elemen

$(selector).width()

Salin selepas log masuk

$(selector).width(length)

Salin selepas log masuk

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>

Salin selepas log masuk

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");
	});
});

Salin selepas log masuk

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>

Salin selepas log masuk

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!