Một thế mạnh nữa của jQuery là làm việc với CSS trên nền tảng của việc thay đổi cấu trúc DOM của tài liệu HTML. Ngoài những hỗ trợ về định dạng CSS, CSS trong jQuery cũng được ứng dụng để tạo ra các hiệu ứng trên website.
Qua một số bài viết về jQuery trên thietkewebc, chúng ta cũng đã làm quen khá nhiều với những phương thức hỗ trợ CSS trong jQuery, hôm nay chúng ta cùng tìm hiểu thêm một số phương thức khác hỗ trợ CSS trong jQuery.
1, Thêm vào và xóa bỏ class của một thành phần HTML
.addClass(className)
Phương thức .addClass() sẽ thêm vào một hay nhiều class cho một thành phần HTML nào đó.
Ví dụ sau sẽ thêm class post cho toàn bộ các thẻ div
$("div").addClass("post"); |
Bạn có thêm nhiều class một lúc cho một thành phần nào đó bằng cách đặt mỗi class cách nhau một khoảng trắng như sau:
$("div").addClass("class1 class2 class3"); |
Sau khi thêm vào các class, bạn có thể viết CSS để dịnh dạng cho các class đó bất cứ thứ gì mà bạn muốn
Ví dụ tôi sẽ định dạng cho class post đã thêm vào như sau:
.post{background: red; color: white} |
.removeClass(className)
Ngược lại với .addClass(), .removeClass() sẽ xóa bỏ một hay nhiều class ra khỏi các thành phần HTML được chỉ định
$("div").removeClass("post"); |
Xóa nhiều class cùng lúc
$("div").removeClass("class1 class2 class3"); |
.toggleClass(className)
Phương thức này hoạt động giống như một chiếc “Công tắc điện”. Nó sẽ chuyển đổi lần lượt giữa 2 phương thức addClass và removeClass
$("div").toggleClass("post"); |
Lần đầu tiên nếu chưa có class “post” thì nó sẽ addClass(“post”), nếu có thì nó sẽ removeClass(“post”), và cứ như vậy nó sẽ chuyển đổi qua lại
2, Lấy giá trị của thuộc tính CSS và định dạng CSS cho một thành phần
.css()
Phương thức .css() trong jQuery có 2 tác dụng
- Lấy giá trị của một thuộc tính CSS đã được gán cho một thành phần
- Thêm vào các thuộc tính CSS và giá trị của nó để định dạng cho thành phần đó
Lấy giá trị của thuộc tính CSS
Ví dụ bạn có một thẻ div có class post
<div class="post">Cursus! Tristique elementum, augue dignissim lectus et aliquam nec...</div> |
Và bạn định dạng CSS như sau:
.post{height: 200px; width: 100px; background: #fff} |
Để lấy giá trị width được gán cho thẻ div trên ta làm như sau:
var h = $('.post').css('height'); |
Kết quả biến h sẽ có giá trị là 100px
Định dạng CSS cho các thành phần
Phương thức .css() sẽ thêm vào các thuộc tính CSS để định dạng cho các thành phần ở mức độ CSS cục bộ, tức là nó thêm vào thuộc tính style trong thẻ HTML cùng với các giá trị của CSS.
Giả sử chúng ta sẽ định dạng thẻ div.post trên hiển thị với màu đỏ như sau
$('.post').css("color","red"); |
Khi sử dụng sử dụng công cụ Firebug của Chrome hoặc Firefox bạn sẽ thấy cấu trúc của thẻ div.post được thêm vào thuộc tính style với thuộc tính CSS: color: red như sau
Bạn có thể thêm vào nhiều thuộc tính CSS để định dạng cùng lúc như sau:
$('.post').css({ |
"color": "red", |
"height": "150px", |
"width": "100px", |
"position": "relative" |
}); |
3, Làm việc với độ lớn của Box
.height(), .witdth()
2 Phương thức này cho phép lấy và gán giá trị độ cao và độ rộng của một thành phần, Độ rộng và độ cao của phương thức này không bao gồm, padding, margin và border
Xét ví dụ sau:
<div>Cursus! Tristique elementum, augue dignissim lectus et aliquam nec...</div> |
Và được định dạng CSS như sau:
.post{ |
width: 100px; |
height: 150px; |
padding: 10px; |
margin: 10px; |
border: 2px solid red; |
} |
Xét đoạn mã sau:
var w = $('.post').width(); |
var h = $('.post').height(); |
Kết quả biến w = 100px, h = 150px
.innerWidth(), innerHeight()
innerWidth và innerHeight cho phép lấy kích thước độ rộng và độ cao của các thành phần bao gồm cả độ lớn của padding.
Tiếp tục xét ví dụ trên và đoạn mã sau:
var h = $('.post').innerHeight(); |
Kết quả biến h có giá trị là 170px = 150px (height) + 10px (padding-top) + 10px (padding-bottom)
Tương tự bạn có thể lấy độ rộng với phương thức innerWidth()
.outerWidth(includeMargin), .outerHeight(includeMargin)
2 phương thức này cho phép lấy độ rộng và độ cao của một thành phần bao gồm cả độ lớn của padding, border và độ lớn của margin nếu biến includeMargin được thiết lập là true (mặc định giá trị này là false)
Xét đoạn mã sau với ví dụ trên
var h1 = $('.post').outerHeight(); |
var h2 = $('.post').outerHeight(true); |
Kết quả:
- Biến h có giá trị là 174px = 150px (height) + 10px (padding-top) + 10px (padding-bottom) + 2px (border-top) + 2px (border-left)
- Biến h2 có giá trị là 194px = 150px (height) + 10px (padding-top) + 10px (padding-bottom) + 2px (border-top) + 2px (border-left) + 10px (margin-top) + 1opx (margin-bottom)
Ngoài ra chúng ta còn một số phương thức làm việc với Position của CSS như:
offset(), position(), scrollLeft(), scrollTop()
KẾT LUẬN
Bên trên là một số phương thức hỗ trợ CSS trong jQuery, trong đó phương thức .addClass(), .removeClass() và .css() là những phương thức được ứng dụng phổ biến nhất. Bạn có thể tìm hiểu thêm về toàn bộ các phương thức hỗ trợ CSS trong jQuery tại đây: http://api.jquery.com/category/css/
