Rumah > Artikel > hujung hadapan web > Apakah kaedah untuk memanipulasi gaya elemen dalam jquery?
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)2.
$(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()1
$(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>
Cara jquery secara tidak langsung mengendalikan gaya elemen
$(document).ready(function() {
$("button").click(function() {
$("img").css("width","250px");
});
});
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() | 从匹配的元素中添加或删除一个类。 |
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]
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!