24 mẫu code ES6 mới nhất giúp khắc phục lỗi JavaScript thực tế

01/07/2021 | 1152

Trong bài viết này, các đoạn code mẫu được đưa ra dựa trên kinh nghiệm sử dụng thực tế, chúng có thể giúp trả lời các câu hỏi phổ biến mà bạn có thể gặp phải trong dự án của mình.

Làm thế nào để ẩn tất cả các element (phần tử) được chỉ định?

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

// Example

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

Làm thế nào để kiểm tra xem element có class (lớp) được chỉ định hay không?

const hasClass = (el, className) => el.classList.contains(className);

// Example

hasClass(document.querySelector('p.special'), 'special'); // true

3.Làm thế nào để chuyển đổi một class cho một element?

const toggleClass = (el, className) => el.classList.toggle(className);

// Example

toggleClass(document.querySelector('p.special'), 'special');

// The paragraph will not have the 'special' class anymore

Làm thế nào để lấy được vị trí cuộn của trang hiện tại?

const getScrollPosition = (el = window) => ({

x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,

y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop

});

// Example

getScrollPosition(); // {x: 0, y: 200}

5.Làm thế nào để cuộn-thật-mượt lên đầu trang?

const scrollToTop = () => {

const c = document.documentElement.scrollTop || document.body.scrollTop;

if (c > 0) {

window.requestAnimationFrame(scrollToTop);

window.scrollTo(0, c - c / 8);

}

};

// Example

scrollToTop();

Làm thế nào để kiểm tra xe parent element (phần tử mẹ) hiện có chưa child element (phần tử con) hay không?
Làm cách nào để kiểm tra xem element được chỉ định có hiển thị trong viewport (khung nhìn) không?
Làm thế nào để tìm nạp tất cả các hình ảnh trong một element?
Làm thế nào để biết thiết bị hiện tại là mobile hay desktop/laptop?
Làm thế nào để lấy được địa chỉ URL hiện tại?
Làm thế nào để tạo một object (đối tượng) chứa các tham số của URL hiện tại?
Làm thế nào để mã hóa một tập hợp các element biểu mẫu như một object?
Làm thế nào để lấy một tập hợp các property (thuộc tính) được chỉ ra bởi các selector (bộ chọn) đã cho từ một object?
Làm cách nào để gọi hàm đã cung cấp sau khi đợi (một khoảng mili giây)?
Làm thế nào để kích hoạt một event (sự kiện) cụ thể trên một element nhất định, tùy ý truyền dữ liệu tùy chỉnh?
Làm cách nào để xóa trình nghe sự kiện khỏi một phần tử?
Làm cách nào để có được định dạng có thể đọc được của số mili giây nhất định?
Làm thế nào để so sánh hai ngày (tính theo số ngày chênh lệch)?
Làm cách nào để thực hiện yêu cầu GET đến URL đã chuyển?
Làm cách nào để thực hiện yêu cầu ĐĂNG (POST) đến URL đã chuyển?
Làm cách nào để tạo counter (bộ đếm) với phạm vi, bước và thời lượng được chỉ định cho selector được chỉ định?
Làm thế nào để copy một chuỗi vào clipboard?
Làm cách nào để biết tab trình duyệt của trang có được focus hay không?
Làm thế nào để tạo một directory (danh mục) nếu nó không tồn tại?