Cách chuyển đổi các lớp trên các phần tử bằng JavaScript là một trong những kỹ năng thực tế nhất mà bạn có thể học với tư cách là một nhà phát triển. Chuyển đổi được sử dụng cho nhiều thứ, bao gồm hiển thị và ẩn menu, thêm và xóa các bộ lọc tìm kiếm và các phương tiện xã hội (thích, không thích, v.v.).
Tất nhiên, việc chuyển đổi không cần phải phức tạp hơn một vài dòng mã, tùy thuộc vào ngữ cảnh. Hôm nay chúng ta sẽ học một cách đơn giản để bắt đầu không chỉ chuyển đổi mà còn học JavaScript nói chung.
Cấu trúc HTML
Trước khi chúng ta đi đến nội dung chức năng với JavaScript, hãy thiết lập một vài phần tử HTML để chúng ta có thứ gì đó để tương tác. Hãy tạo một trình bao bọc, một nút và một hộp.
Đặt phần sau vào bên trong các thẻ nội dung của tài liệu HTML của bạn:
<div class="wrapper">
<button class="button">Toggle</button>
<div class="box"></div>
</div>Phần tử div cha (trình bao bọc) chỉ ở đó để chúng ta có thể căn giữa các phần tử con của nó (hộp và nút) bằng CSS. Đây là mỹ phẩm và không cần thiết để làm việc.
Lưu ý:nếu bạn đang sử dụng trình chỉnh sửa mã trực tuyến như CodePen, bạn có thể thêm mã này vào cửa sổ tab HTML. Họ thêm phần còn lại của HTML cho bạn ở hậu trường, bao gồm cả các thẻ nội dung.
Kiểu CSS
Phần tử div chính có .wrapper lớp có một số thuộc tính Flexbox căn giữa các phần tử con của nó:hộp và nút. Tôi sẽ không hiểu về cách thức và lý do của Flexbox, đó là hướng dẫn khác.
Nút và hộp có một số lớp kiểu cơ bản cho mục đích thẩm mỹ.
.wrapper {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #eeeeee;
}
.button {
display: block;
text-align: center;
font-size: 1.5rem;
color: white;
background-color: #262422;
border-radius: 4px;
padding: 1rem 2rem;
margin-bottom: 1rem;
}
.bg-red {
background-color: #aa2f18;
}
Điều quan trọng cần tập trung ở đây là .bg-red lớp chứa CSS background-color thuộc tính có giá trị là '# AA2F18' (màu đỏ). Đây là lớp mà chúng ta muốn chuyển (thêm hoặc bớt) vào phần tử hộp khi chúng ta nhấp vào phần tử nút.
Xử lý sự kiện JavaScript
Trước khi có thể bắt đầu thao tác các phần tử với JavaScript, trước tiên chúng tôi phải lưu trữ một tham chiếu đến hai phần tử của chúng tôi (hộp và nút). Chúng tôi làm điều đó bằng cách khai báo hai biến, nút button và box Sau đó, chúng tôi gán hai phần tử cho các biến tương ứng của chúng.
Để chọn phần tử hộp và nút mà chúng tôi muốn lưu trữ tham chiếu, chúng tôi sẽ sử dụng querySelector vinh quang phương thức lấy các lớp phần tử của chúng ta:
let button = document.querySelector(".button");
let box = document.querySelector(".box");Bây giờ chúng ta có tham chiếu đến từng phần tử mục tiêu của mình, chúng ta có thể thao tác DOM với chúng, bằng cách truy cập các thuộc tính và phương thức của chúng. Trong trường hợp này, chúng tôi muốn sử dụng trình nghe sự kiện lắng nghe sự kiện nhấp chuột trên phần tử nút. Sau khi nhấp chuột được phát hiện, chúng tôi muốn thực thi một chức năng chạy màu nền chuyển đổi trên phần tử hộp của chúng tôi.
Để làm điều đó, chúng tôi sẽ đính kèm addEventListener() đến phần tử nút của chúng tôi (thông qua tham chiếu biến của nó). Bên trong phương thức trình xử lý sự kiện này, chúng tôi đang thêm hai giá trị tham số:'click' (loại sự kiện) và function() . Chúng tôi sẽ sử dụng một hàm ẩn danh (không được đặt tên) trong ví dụ này.
Sau đó, bên trong hàm ẩn danh:chúng tôi đính kèm toggle() của thuộc tính JavaScript classList phương thức cho phần tử hộp của chúng tôi. Công việc của phương pháp chuyển đổi là thêm hoặc xóa .bg-red của chúng tôi lớp:
button.addEventListener("click", function() {
box.classList.toggle("bg-red");
});Phương thức chuyển đổi classList hoạt động như thế này:nếu lớp được chỉ định đã tồn tại trên phần tử đích, thì nó sẽ bị loại bỏ. Nếu nó không tồn tại, thì nó sẽ được thêm vào.
Đã được thực hiện! Bây giờ bạn biết cách chuyển đổi các lớp trên các phần tử được chỉ định bằng JavaScript thuần túy. Tôi đã tạo tất cả mã từ hướng dẫn này trên CodePen.
Mã này tương thích với tất cả các trình duyệt hiện đại từ IE10 trở lên.