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"); }); });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() | 从匹配的元素中添加或删除一个类。 |
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!