Đôi khi, để bắt đầu hành trình tìm hiểu một thứ gì đó to lớn và phức tạp, bạn cần học một thứ nhỏ và đơn giản. JavaScript rất lớn và phức tạp, nhưng bạn có thể bước vào nó bằng cách học những điều nhỏ và đơn giản. Nếu bạn là một nhà thiết kế web, tôi nghĩ có một điều đặc biệt mà bạn có thể học được đó là trao quyền cực kỳ mạnh mẽ.
Đây là điều tôi muốn bạn học: Khi bạn nhấp vào một phần tử nào đó, hãy thay đổi một lớp trên một phần tử nào đó.
Tóm tắt lại những điều cần thiết tuyệt đối, hãy tưởng tượng chúng ta có một nút và một div:
Click Me I'm an element Div có thể có một số kiểu cơ sở và nó có thể có một số kiểu khi nó có một lớp cụ thể:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Những kẻ lừa gạt CSS tinh vi có thể nhận ra đây là cơ hội cho việc hack hộp kiểm, nhưng đó không phải là những gì chúng tôi đang làm hiện nay.
Chúng tôi muốn đính kèm “trình lắng nghe sự kiện” vào nút: một chút mã để “lắng nghe”, trong trường hợp của chúng tôi, nhấp vào các sự kiện và khi điều đó xảy ra, hãy chạy thêm mã.
Bạn biết làm thế nào trong CSS, chúng ta cần "chọn" các phần tử để tạo kiểu cho chúng không? Chúng tôi cũng cần làm điều đó trong JavaScript để đính kèm trình xử lý sự kiện của chúng tôi. Chúng tôi sẽ tạo một "tham chiếu" đến nút, dưới dạng một biến, như sau:
var button = document.querySelector("button");Bây giờ chúng tôi có tham chiếu đến nút, chúng tôi sẽ đính kèm trình xử lý sự kiện đó:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Và chúng ta muốn làm gì trong trường hợp có một cú nhấp chuột? Thêm tên lớp vào div của chúng ta! Nhưng cũng giống như chúng ta cần một tham chiếu cho nút để làm những việc với nó, chúng ta cũng cần một tham chiếu cho div. Hãy thực hiện cả hai cùng một lúc, đây là toàn bộ đoạn mã:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Đó là toàn bộ điều tôi muốn cho bạn thấy. Với một số CSS được thêm vào lớp “yay” đó, chúng ta có thể làm mờ dần div:
Xem Pen Click Something / Change Class của Chris Coyier (@chriscoyier) trên CodePen.
Tại sao một điều này?
Khả năng thiết kế là vô tận khi bạn kiểm soát CSS và trạng thái của bất kỳ phần tử nào (nó có tên lớp nào). Che giấu và tiết lộ mọi thứ là sức mạnh rõ ràng, nhưng nó thực sự có thể là bất cứ điều gì.
Lên hạng
Hãy nhớ rằng bạn không bị giới hạn trong việc thay đổi một tên lớp. Bạn có thể thay đổi nhiều lớp trên một phần tử hoặc thay đổi các lớp trên nhiều phần tử.
Xem xét thuộc tính classList nhiều hơn. “Chuyển đổi” không phải là tùy chọn duy nhất.
Cũng giống như HTML và CSS, JavaScript có các mức hỗ trợ trình duyệt khác nhau cho mọi thứ. Xem xét hỗ trợ của trình duyệt cho classList và thêm addEventListener. Bạn có đồng ý với các mức hỗ trợ đó cho dự án của mình không? Nếu không, bạn có thể xem xét polyfills hoặc thậm chí là jQuery.
Chúng tôi đã sử dụng sự kiện "nhấp chuột", nhưng có rất nhiều sự kiện khác. Các sự kiện chuột khác, thao tác cuộn, bàn phím, v.v. Nhiều trăm.
Phương pháp chúng tôi sử dụng để chọn là document.querySelector. Điều này rất hữu ích vì nó trả về một phần tử duy nhất để chúng tôi làm việc với. Ngoài ra, các bộ chọn mà bạn cung cấp cũng giống như các bộ chọn CSS. document.querySelector("#overlay .modal > h2");sẽ là một lựa chọn hợp pháp. Tuy nhiên, đây không phải là phương pháp duy nhất để lựa chọn, có những phương pháp khác như getElementById, querySelectorAll, getElementsByClassName, v.v.
Dưới đây là một ví dụ về nơi chúng tôi chọn một loạt các mục điều hướng và đính kèm một trình xử lý nhấp chuột vào tất cả chúng cùng một lúc:
Xem Lớp học thay đổi bút trên nội dung của Chris Coyier (@chriscoyier) trên CodePen.
Nếu JavaScript mà chúng tôi đã viết trong ví dụ nhỏ của mình không tải được vì bất kỳ lý do gì, chúng tôi sẽ vẫn có một nút có nội dung “Nhấp vào tôi”. Nhưng nhấp vào nó sẽ không làm được nhiều việc, phải không? Có lẽ chúng ta có thể chèn nút đó bằng JavaScript, vì vậy nút thậm chí không có ở đó trừ khi chúng ta biết nó sẽ hoạt động? Ý kiến hay, hả? ;)