Quick tip: thêm hoặc xóa bỏ class CSS bằng Vanilla JavaScript
Đôi khi, trong JavaSciprt, bạn cần phải thêm hoặc bỏ bớt CSS class, và bạn không muốn dùng thêm cả một thư viện cồng kềnh như jQuery để làm việc này cả.
CSS class rất tiện dụng trong những trường hợp khi bạn muốn page element thay đổi phản hồi theo thao tác của người dùng.
Một số ví dụ áp dụng của CSS class:
- Ẩn/Hiện menu.
- Highlight form error
- Hiện hộp hội thoại
- Hiện các nội dung khác nhau tùy vào selection
- Hoạt họa element để phản hồi click
Có hai tính chất trong JavaScript cho phép bạn làm việc với class: className và classList. className tương thích khá mạnh mẽ, trong khi classList thì hiện đại hơn và tiện hơn. Nếu bạn không cần hỗ trợ IE 8 và 9, cứ việc bỏ qua className.
Hãy bắt đầu với phiên bản tương thích trước.
Điều chỉnh Class sao cho tương thích
tính chất JavaScript className cho phép bạn truy cập thuộc tính class của một HRML element. Một số cơ chế sử lý chuỗi sẽ cho phép chúng ta thêm và xóa bỏ class.
Chúng ta sẽ truy cập HTML element bằng querySelectorAll(), tương thích với trình duyệt từ IE 8 trở lên.
Add a Class
Để thêm class, chúng ta sẽ viết một hàm tiếp nhận element ta muốn thay đổi và thêm class tương ứng đến tất cả các element đó.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function addClass ( elements , myClass ) {
// nếu ta có selector, nhận các elements đã chọn
if ( typeof ( elements ) === 'string' ) {
elements = document . querySelectorAll ( elements ) ;
}
// nếu ta chỉ có một dom element, biến thành array để đơn giản hóa hành vi
else if ( ! elements . length ) { elements = [ elements ] ; }
// thêm class vào tất cả element đã chọn
for ( var i = 0 ; i < elements . length ; i ++ ) {
if ( ! ( ' ' + elements [ i ] . className + ' ' ) . indexOf ( ' ' + myClass + ' ' ) > - 1 ) {
elements [ i ] . className += ' ' + myClass ;
}
}
}
|
Bạn sẽ sớm thấy hàm đi vào làm việc, nhưng để thấy function làm việc trong thực tế, cứ việc dùng CSS sau:
|
1
2
3
4
5
6
7
8
9
|
. red {
background : red ;
}
. highlight {
background : gold ;
}
|
… và HTML sau:
|
1
2
3
4
5
6
7
|
< div id = "iddiv" class = "highlight" > ID div < / div >
< div class = "classdiv" > Class div < / div >
< div class = "classdiv" > Class div < / div >
< div class = "classdiv" > Class div < / div >
|
Sau đây là một số ví dụ của hàm trên:
|
1
2
3
4
5
6
7
8
|
addClass ( '#iddiv' , 'highlight' ) ;
addClass ( '.classdiv' , 'highlight' ) ;
addClass ( document . getElementById ( 'iddiv' ) , 'highlight' ) ;
addClass ( document . querySelector ( '.classdiv' ) , 'highlight' ) ;
addClass ( document . querySelectorAll ( '.classdiv' ) , 'highlight' ) ;
|
Nên nhớ, bạn có thể xác định HTML element bạn muốn thay đổi thông qua một selector hoặc bạn có thể trực tiếp chuyển giao luôn những element này.
Hàm addClass của chúng ta làm việc như thế nào
Hàm addClass trước hết sẽ nhận hai tham số: HTML element ta muốn thay đổi và class cần thêm vào. Mục tiêu ở đây là phải loop được qua mỗi HTML element, hãy chắn class vẫn chưa có trước khi thêm vào.
Đầu tiên, nếu chọn xác định HTML element thông qua selector như #iddiv hay .classdiv, ta có thể dùng querySelectorAll() để tóm hết tất cả element mong muốn.
|
1
2
3
4
5
6
|
// Nếu ta có selector, nhận elements đã chọn
if ( typeof ( elements ) === 'string' ) {
elements = document . querySelectorAll ( elements ) ;
}
|
Tuy nhiên, nếu DOM element được feed trực tiếp vào hàm, ta có thể loop qua chúng. Nếu chỉ có một element duy nhất, ta sẽ biến nó thành array để dùng được cùng một loop và đơn giản hóa code.
|
1
2
3
4
|
// Nếu ta chỉ có một DOM element, biến nó thành array để đơn giản hóa hành vi
else if ( ! elements . length ) { elements = [ elements ] ; }
|
Cần chú ý, ta đang thêm khoảng cách ở đầu và cuối để đơn giản hóa pattern đang tìm kiếm và tránh cần đến regular expression.
Đến đây là xong rồi, bạn giờ có thể thêm được class!
Xóa bỏ Class
Để xóa bỏ một class, chúng ta có thể sử dụng hàm sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function removeClass ( elements , myClass ) {
// nếu ta có selector, nhận elements đã chọn
if ( typeof ( elements ) === 'string' ) {
elements = document . querySelectorAll ( elements ) ;
}
// nếu ta chỉ có một DOM element, biến nó thành array để đơn giản hóa hành vi
else if ( ! elements . length ) { elements = [ elements ] ; }
// tạo pattern để tìm class name
var reg = new RegExp ( '(^| )' + myClass + '($| )' , 'g' ) ;
// xóa bỏ class khỏi mọi elements đã chọn
for ( var i = 0 ; i < elements . length ; i ++ ) {
elements [ i ] . className = elements [ i ] . className . replace ( reg , ' ' ) ;
}
}
|
Đa phần các hàm removeClass này làm việc tương tự hàm addClass; bằng cách thu thập và loop qua các HTML element bạn muốn. Phần class bị xóa bỏ là điểm khác biệt duy nhất.
Chi tiết hơn về quá trình xóa bỏ class:
|
1
2
3
4
5
6
7
8
9
|
// tạo pattern để tìm class name
var reg = new RegExp ( '(^| )' + myClass + '($| )' , 'g' ) ;
// xóa class khỏi mọi elements đã chọn
for ( var i = 0 ; i < elements . length ; i ++ ) {
elements [ i ] . className = elements [ i ] . className . replace ( reg , ' ' ) ;
}
|
Trước tiên, ta tạo một regular expression để tìm tất cả phiên bản của class ta mong muốn. Biểu thức '(^| )'+myClass+'($| )' có nghĩa phần đầu hoặc khoảng trống, theo sau bởi myClass, cuối cùng là phần đuôi hoặc khoảng trống. Đoạn ‘g’ ám chỉ global match, đại diện tất cả phiên bản của pattern.
Dùng pattern của ta, ta có thể tạo class name với khoảng trống. Như vậy, class name ở giữa danh sách sẽ vẫn tách biệt, và sẽ không có thiệt hại nào cả nếu class bị xóa bỏ nằm ở cuối.
Chỉnh sửa class theo cách ‘Modern’
Trình duyệt từ IE 10 trở lên hỗ trợ tính chất gọi là classList, giúp dễ xử lý class của một element hơn.
Đây là một số thừ mà classList làm được:
document.getElementById("myelement").classList.add("myclass");
- length — số class names được áp dụng
- item(index) — class name tại một index nhất định
- contains(class) — trả kết quả true có áp dụng class đó
- add(class) — áp dụng class mới đến node
- remove(class) — loại bỏ class khỏi node
- toggle(class) — xóa hoặc thêm class tùy theo áp dụng hay không
Hãy dùng thông tin này để tạo hàm giúp thêm và xóa class từ mọi element khớp với selector.
Những hàm này sẽ nhận tất cả element mong muốn, loop qua chúng, và thêm hoặc xóa class đến mỗi element.
Thêm Class
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function addClass ( selector , myClass ) {
// nhận tất cả elements nhận selector của ta
elements = document . querySelectorAll ( selector ) ;
// thêm class đến elements đã chọn
for ( var i = 0 ; i < elements . length ; i ++ ) {
elements [ i ] . classList . add ( myClass ) ;
}
}
// ví dụ vận dụng:
addClass ( '.class-selector' , 'example-class' ) ;
addClass ( '#id-selector' , 'example-class' ) ;
|
Xóa Class
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function removeClass ( selector , myClass ) {
// nhận tất cả elements khớp với selector của ta
elements = document . querySelectorAll ( selector ) ;
// xóa bỏ class khỏi mọi elements đã chọn
for ( var i = 0 ; i < elements . length ; i ++ ) {
elements [ i ] . classList . remove ( myClass ) ;
}
}
// ví dụ sử dụng:
removeClass ( '.class-selector' , 'example-class' ) ;
removeClass ( '#id-selector' , 'example-class' ) ;
|
Lời kết
Như vậy, ta đã biết thêm cách thêm và xóa bỏ class thông qua className (cách tương thích) và classList (cách hiện đại).
Khi bạn có thể kiểm soát class CSS qua JavaScript, bạn sẽ mở ra rất nhiều chức năng gồm content display updates, animations, error messages, dialogs, menus,…
Tech talk via sitepoint
Có thể bạn quan tâm:
- Dữ liệu về xe hơi sản xuất trong các năm gần đây
- Tăng thêm 1% số người dùng di động sẽ đóng góp hơn 100 triệu USD vào GDP năm 2020, tạo 140.000 việc làm mới
- Nên cấp phát bao nhiêu vCPU cho một máy ảo? Sự khác nhau giữa Virtual Sockets và Cores per socket?
- 6 trình duyệt tuyệt vời cho thiết bị chạy Android
- Rút tiền từ ATM bằng điện thoại thông minh
- Cuộc chiến giữa Google và Uber mới chỉ bắt đầu?
- Vấn đề với điện thoại di động
- Chạy tự động video Facebook và Youtube khi gắn vào website, blog, forum
- Phần mềm quản trị logistics nào dành cho bạn: Quản lý vận tải, Quản lý đội xe, hay Tối ưu hoá lộ trình
- Mobile 3D Graphics with OpenGL ES and M3G
- Xuất hiện các tay chơi mới trong lĩnh vực truyền hình
- 5 quan niệm sai lầm cần “bỏ ngay” khi test sản phẩm
DVMS chuyên:
* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>
