Làm cách nào để thêm CSS bằng tên lớp trong JavaScript?

Tên lớp có thể được JavaScript sử dụng để thao tác phần tử được chỉ định trong khi CSS sử dụng tên lớp đó để tạo kiểu cho phần tử đó. Do đó, trong bài đăng này, chúng ta sẽ tìm hiểu cách sửa đổi các lớp CSS trong JavaScript nhưng trước tiên chúng ta hãy thiết lập môi trường bằng cách khởi tạo các phần tử trong HTML và sau đó tạo kiểu cho phần tử đó trong CSS

Cài đặt môi trường

Hãy để chúng tôi tạo một phần tử div hoạt động giống như một vùng chứa và đặt hai phần tử bên trong vùng chứa này. Một cái sẽ là thẻ h2 và cái còn lại sẽ là thẻ p. Để liên kết tệp CSS với HTML này, chúng tôi đã chèn thẻ liên kết vào phần đầu và tham chiếu tệp CSS của chúng tôi bên trong thuộc tính href (kiểu. css)

<. LOẠI TÀI LIỆU html>

< html lang="vi">

< đầu >

< tiêu đề > Sửa đổi CSS bằng JavaScript << /title>

< liên kết rel="stylesheet" href="style.css" >

< /đầu >

< cơ thể >

< div class="vùng chứa">

< h2 > Anh < /h2>

< p > Thủ đô của nước Anh là Luân Đôn </p>

< /div >

< /body >

< /html >

Để lấy tham chiếu của phần tử div bên trong CSS, chúng ta đã sử dụng thuộc tính class. Chúng tôi đã thực hiện một số kiểu dáng trên bộ chứa div cũng như các thành phần bên trong bộ chứa div

.container{
màu nền. rgb(54, 224, 207);
}

.containerh2, p {
màu. rgb(125, 104, 184);
}

Đầu ra sẽ trông như thế này

Sửa đổi các lớp CSS

Như đã đề cập trong phần giới thiệu của bài viết này, JavaScript cung cấp cho chúng ta các thuộc tính classList và className có thể được sử dụng để thao tác với thuộc tính lớp. Tên lớp được sử dụng để đặt giá trị trực tiếp cho một lớp trong khi sử dụng thuộc tính classList chúng ta có thể thực hiện các chức năng sau

• danh sách lớp học. add() được sử dụng để thêm các giá trị lớp
• danh sách lớp học. toggle() được sử dụng để bật hoặc tắt một lớp
• danh sách lớp học. replace() được sử dụng để thay thế một giá trị lớp bằng một giá trị lớp khác
• danh sách lớp học. chứa() được sử dụng để kiểm tra xem một giá trị có tồn tại hay không
• danh sách lớp học. remove() được sử dụng để loại bỏ một giá trị lớp

Chúng ta hãy xem qua một ví dụ để hiểu rõ hơn về thuộc tính classList và các phương thức tích hợp của nó và chúng ta sẽ sử dụng cùng một mã HTML và CSS mà chúng ta đã sử dụng trước đó. Đầu tiên, chúng ta hãy sử dụng thuộc tính className để gán một lớp cho thuộc tính h2. Vì mục đích đó, chúng tôi đã tham chiếu một lớp trong CSS hiện không tồn tại và cung cấp cho nó một số kiểu dáng được hiển thị bên dưới

.info{

màu nền. trắng;

đường viền. 2px rắn đen;

}

Tiếp theo, lấy tham chiếu của phần tử h2 bằng querySelector(‘h2’) sẽ chọn phần tử h2 đầu tiên trong mã HTML. Tiếp theo, sử dụng thuộc tính className để gán lớp thông tin cho phần tử h2. Mã JavaScript được đưa ra dưới đây

// Chọn phần tử h2 đầu tiên
const myh2 = . Bộ chọn truy vấn('h2');

// Đặt lớp thông tin thành myh2
myh2. tên lớp = 'thông tin';

Để tham chiếu mã JavaScript này, hãy sử dụng thẻ script với thuộc tính src trong mã HTML cung cấp tên tệp JavaScript trong thuộc tính src

< script src ="mã. js"> tập lệnh >

Mật mã. js là tên tệp JavaScript của chúng tôi. Trang web của chúng ta bây giờ sẽ như thế này

Bây giờ chúng ta hãy sửa đổi các lớp CSS bằng thuộc tính classList. Như đã thấy trước đó, thuộc tính classList cung cấp cho chúng ta một số phương thức tích hợp sẵn mà chúng ta có thể sử dụng để sửa đổi các lớp CSS. Chúng tôi sẽ sử dụng classList. add() sẽ thêm một lớp trong ví dụ sau

// Chọn div đầu tiên

const hideDiv = . Bộ chọn truy vấn('div');

ẩnDiv. Danh sách lớp học . thêm('ẩn'); // hidden class added

Tiếp theo, đi đến tệp CSS và khởi tạo lớp ẩn bằng cách không hiển thị để div không hiển thị

.hidden{

hiển thị. không;

}

Bây giờ bạn sẽ thấy rằng phần tử div sẽ bị ẩn và bạn sẽ không thấy gì trên trang web của mình

Bây giờ chúng ta hãy sử dụng classList. phương thức thay thế () trong đó chúng ta sẽ thay thế lớp ẩn hiện có bằng một lớp bọc khác

// Chọn div đầu tiên

const hideDiv = . Bộ chọn truy vấn('div');

ẩnDiv. Danh sách lớp học . thêm('ẩn'); // hidden class added

ẩnDiv. Danh sách lớp học . thay thế('ẩn' , 'wrap'); // replace hidden class with info class

Tiếp theo, chuyển đến tệp CSS của bạn và tạo kiểu cho lớp bọc

.wrap{

cỡ chữ. lớn;

}

Bây giờ bạn sẽ thấy rằng nội dung của chúng tôi hiện đã hiển thị và kích thước phông chữ sẽ lớn hơn trước

Phần kết luận

JavaScript cung cấp cho chúng ta hai thuộc tính mà chúng ta có thể sử dụng để sửa đổi các lớp CSS; . Thuộc tính className được sử dụng để đặt giá trị trực tiếp cho một lớp CSS trong khi classList cung cấp cho chúng ta một số phương thức tích hợp để thao tác với các lớp CSS

Ví dụ, danh sách lớp. add() cho chúng ta khả năng thêm các giá trị lớp, classList. remove() cho chúng ta khả năng loại bỏ một lớp, classList. toggle() cho chúng ta khả năng thêm toggling vào một lớp và classList. replace() cho chúng ta khả năng thay thế một giá trị lớp bằng một lớp khác

Trong bài đăng này, chúng ta đã thấy cách sửa đổi các lớp CSS bằng JavaScript bằng cách tìm hiểu về hai thuộc tính của JavaScript;

Làm cách nào để thêm CSS bằng cách sử dụng lớp trong JavaScript?

Làm cách nào để thêm kiểu trong JavaScript bằng tên lớp?

Làm cách nào để thêm tên lớp trong CSS?

Làm cách nào để áp dụng kiểu bằng className?