Người Viết : ViKiMi Editor
Thực hiện Thiết lập / Lấy về CSS Class của phần tử HTML giúp phát triển hiệu quả
Thiết kế giao diện Website sử dụng kết hợp các ngôn ngữ CSS / Javascript / PHP / C# …. Nhưng chúng ta cũng có thể sử dụng Thư Viện jQuery như một phần không thể thiếu. Chúng ta luôn thắc mắc Thư viện jQuery có thể ảnh hương nhiều hay không? Chắc chắn như vậy! Vì chúng ta có thể kết hợp jQuery và CSS để tạo nên một giao diện đạt yêu cầu hơn
Thư viện jQuery có thể kết hợp với CSS + HTML để tạo ra một giao diện đạt chuẩn. Giao diện cho người dùng !
Vậy điều này là gì ?
+ Đó là việc jQuery sẽ giúp lập trình để LẤY VỀ / thêm hoặc xoá các CSS class khỏi một phần tử HTML
+ Nhờ việc này mà bạn có thể chủ động tạo ra các giao diện theo các đối tượng người dùng khác nhau hoặc thiết bị khác nhau.
+ Sự thay đổi thiết kế CSS Class và HTML bằng cách sử dụng jQuery khiến cho Website đáp ứng được theo các đối tượng người dùng khác nhau hoặc thiết bị khác nhau.
Chỉ cần vận dụng thật linh hoạt thì chúng ta có thể có một giao diện tốt !
A ] LẤY THÔNG TIN CSS CLASS CỦA PHẦN TỬ HTML
Chúng ta có 2 cách để lấy về CSS Class của phần tử HTML
+ Sử dụng phương thức Attr()
Cú pháp :
$(‘SELECTOR’). attr( ‘class’ );
Example :
$(document).ready(function() {
var className = $(‘#container’). attr( ‘class’ );
});
+ Sử dụng phương thức Prop()
Cú pháp :
$(‘SELECTOR’). prop( ‘class’ );
Example :
$(document).ready(function() {
var className = $(‘#container’). prop( ‘class’ );
});
B ] THÊM CSS CLASS VÀO PHẦN TỬ HTML
+ Để thêm Class vào phần tử HTML hãy sử dụng phương thức addClass()
+ Thêm 1 CSS Class
Cú pháp :
$(‘SELECTOR’). addClass(” className “);
Example :
$(document).ready(function(){
$(“button”).click(function(){
$(“h1, h2, p”). addClass( “ColorClass” );
});
});
+ Thêm nhiều CSS Class
Cú pháp :
$(‘SELECTOR’). addClass(” className_1 className_2 className_n “);
Example :
$(document).ready(function(){
$(“button”).click(function(){
$(“h1, h2, p”). addClass(“className1 className2 className3”);
});
});
C ] XOÁ CSS CLASS KHỎI PHẦN TỬ HTML
+ Để xoá CSS Class khỏi phần tử HTML hãy sử dụng Phương thức removeClass()
Cú pháp :
$(‘SELECTOR’). removeClass( “className” );
$(‘SELECTOR’). removeClass( “className_1 className_2 className_n” );
Example :
$(document).ready(function(){
$(“#button”). click(function(){
$(“#div_no1”). removeClass( “important blue” );
});
});
C ] SỬ DỤNG PHƯƠNG THỨC TOGGLECLASS
+ Chúng ta cũng có một lựa chọn đó là tạo hiệu ứng chuyển đổi giữa addClass và removeClass.
Để tạo hiệu ứng này hãy sử dụng toggleClass()
(Cũng tương tự các hiệu ứng chuyển đổi trước đây)
Cú pháp :
$(‘SELECTOR’). toggleClass( “className” );
$(‘SELECTOR’). toggleClass( “className_1 className_2 className_n” );
Example :
$(document).ready(function(){
$(“button”).click(function(){
$(“h1, h2, p”). toggleClass(“className1 className2 className3”);
});
});
