Làm Việc Với CSS

jQuery cung cấp API cho phép bạn làm việc dễ dàng với CSS của phần tử. Trong bài học này chúng ta sẽ tìm hiểu cách thêm, xóa class vào phần tử HTML và cách thay đổi CSS của phần tử.

addClass()

Để gắn thêm lớp CSS vào phần tử chúng ta sử dụng phương thức addClass() với đối số truyền vào là tên của lớp bạn muốn thêm vào.

$(function () {
    $("button").click(function (e) {
        $( "p" ).addClass( "first-class" );
    });
});

Chạy

Ở ví dụ trên chúng ta thêm vào phần tử p lớp CSS first-class sau khi người dùng nhấp vào nút bấm. Ngoài chúng ta cũng định nghĩa màu cho lớp first-class (trong tab CSS):

.first-class {
    color: #4CAF50;
}

Sử dụng phương thức addClass() bạn cũng có thêm nhiều hơn một lớp CSS cho phần tử cùng một lúc. Ở ví dụ dưới đây chúng ta thêm vào phần tử p hai lớp CSS first-classsecond-class:

$( "p" ).addClass( "first-class second-class" );

Chạy

removeClass()

Để xóa bỏ lớp CSS ra khỏi phần tử chúng ta dùng phương thức removeClass():

$(function () {
    $("button").click(function (e) {
        $( "p" ).removeClass( "first-class" );
    });
});

Chạy

Tương tự, sử dụng removeClass() bạn cũng có thể xóa nhiều lớp CSS ra khỏi phần tử cùng một lúc:

$( "p" ).removeClass( "first-class second-class" );

Chạy

css()

Dùng phương thức css() để gán giá trị cho thuộc tính CSS của phần tử. Ví dụ dưới đây gán giá trị thuộc tính CSS color cho phần tử p:

$(function () {
    $("button").click(function (e) {
        $("p").css("color", "#4CAF50");
    });
});

Chạy

Trường hợp bạn muốn gán thuộc tính CSS với tên có nhiều hơn một từ và các từ được phân cách bởi dấu gạch ngang - (ví dụ như background-color) thì bạn cần chuyển đổi tên thuộc tính về dạng chữ kiểu lạc đà (hay camel case) trong đó dấu gạch ngang sẽ được bỏ đi và chữ cái sau đó sẽ được in hoa.

$("p").css("backgroundColor", "#4CAF50");
$("p").css("color", "#fff");

Chạy

Chúng ta cần làm vậy là do ký tự - trong JavaScript được dùng để biểu diễn phép toán trừ.

Trường hợp bạn cần thêm (hoặc thay đổi) nhiều thuộc tính CSS của phần tử, bạn có thể sử dụng đối số truyền vào là một đối tượng như phía dưới đây:

$("p").css({
    color: "white",
    backgroundColor: "#4CAF50"
});

Chạy

jQuery Cơ Bản


Thảo Luận


Chưa có câu hỏi nào cho bài hướng dẫn này
Đặt câu hỏi

Mời Bạn Bè

Gửi email mời bạn bè tham gia khóa học

Viết Cùng Tác Giả

Bạn biết về chủ đề này và muốn tham gia viết cùng tác giả?