Hướng dẫn is vanilla css best? - vani css là tốt nhất?
Hello cả nhà. React, Vue hay Angular đang từng bước trở thành quy chuẩn làm việc Front-end rồi. Nhưng cũng có những trường hợp mà chúng ta phải sử dụng Vanilla JS hay gọi là Javascrip chay (tính chất dự án không cần thiết hoặc không sử dụng những front-end framework kể trên). Có thể sử dụng jQuery tuy nhiên không phải lúc nào jQuery cũng tốt (khiến website chậm chạp, cần những tác vụ đơn giản không cần thiết). Show
Bài viết này mình sẽ giới thiệu tới các bạn 24 đoạn code Vanilla JS xử lý DOM thông dụng, giải quyết những vấn đề mà có thể các bạn sẽ thường gặp khi làm việc. Bắt đầu nhé. 1. Ẩn đi những phần tử đặc biệt trên trang
Đoạn code này sẽ ẩn đi và bản chất là thêm style="display:none" cho tất cả những phần tử truyền vào. Ví dụ ẩn tất cả ảnh trên trang web:style="display:none" cho tất cả những phần tử truyền vào. Ví dụ ẩn tất cả ảnh trên trang web:
2. Kiểm tra xem element có chứa một class nào đó không
Đoạn code này nhận vào 2 giá trị: element và tên class cần kiểm tra, trả về dạng booean (true hoặc false)booean (true hoặc false) Ví dụ kiểm tra một element p.specialcó chứa class .pecial hay không
3. Togge (thêm & bớt) một class cho một element
Đoạn code trên nhận vào 2 giá trị: element và tên class cần toggle (khi element không tồn tại class thì sẽ thêm vào, tồn tại rồi sẽ bỏ đi) Ví dụ thêm bớt thẻ .special cho element p.specialspecial cho element p.special
4. Lấy ra vị trí cuộn của trang hiện tại
Đoạn code này sẽ trả về giá trị tọa độ (x,y) của trang hiện tại Ví dụ:(x,y) của trang hiện tại Ví dụ:
5. Tạo hiệu ứng Scroll Top mượt mà
Đoạn code định nghĩa một function scroll lên đầu trang một cách mềm mại Ví dụ:
6. Kiểm tra một element cha có chứa một element con hay không 0Function nhận vào 2 tham số: Element cha và Element con, trả về giá trị theo kiểu boolean (true hoặc false) Ví dụ:boolean (true hoặc false) Ví dụ: 17. Kiểm tra một element có xuất hiện trong màn hình nhìn thấy (viewport) hay không 2Function nhận vào 2 tham số: element cần kiểm tra và điều kiện partiallyVisible (chấp nhận chỉ nhìn thấy một phần hay không) Ví dụ: 38. Lấy ra tất cả hình ảnh trong một element 4Function này nhận vào 2 tham số: element cần lấy ảnh và includeDuplicates (chấp nhận lấy ảnh trùng nhau hay không) Ví dụ lấy ra tất cả hình ảnh trong document 5Còn nữa ...Còn phần 2 và 3 với ví dụ thực tế nữa, bạn nào quan tâm follow để mình viết bài nha :3 |