Khi học một ngôn ngữ lập trình nào đó thì ngoài việc hiểu hết các lý thuyết cơ bản thì chuyện áp dụng nó vào sử dụng trong thực tế cũng đặc biệt quan trọng. Do đó nên ngày hôm nay mình sẽ giới thiệu đến bạn các đoạn code hay được sử dụng vợi mục đích chính là giải quyết các vấn đề phổ biến trong thực tế bằng Javascript. Nào chúng ta hãy cùng nhau tìm hiểu nhé!
Kiểm tra Element Có Chứa Class Hay Không?
Và dưới đây là đoạn code nhé!
ele.classList.contains('Tên Class');Thêm Một Đối Tượng Con Vào Element Xác Định
Và dưới đây là đoạn code nhé!
target.appendChild(element);Tạo Đối Tượng Mới
Và dưới đây là đoạn code nhé!
const element = document.createElement('div');Tạo Text Note Mới
Và dưới đây là đoạn code nhé!
const ele = document.createTextNode('Xin Chào');Cách Lấy CSS Style Của Đối Tượng
Và dưới đây là đoạn code nhé!
const styles = window.getComputedStyle(element, null);Sau đó thì chúng ta sẽ lấy thuộc tính CSS của element bằng getPropertyValue:
const backgroundColor = styles.getPropertyValue('background-color');Cách Lấy Thuộc Tính(Attribute) Của Đối Tượng
Và dưới đây là đoạn code nhé!
const tieuDe = link.getAttribute('title');Cách Set Thuộc Tính(Attribute) Của Đối Tượng
Và dưới đây là đoạn code nhé!
image.setAttribute('width', '200px');Cách Xoá Thuộc Tính(Attribute) Của Đối Tượng
Và dưới đây là đoạn code nhé!
ele.removeAttribute('title');Tự Động Selected Text Khi Người Dùng Focus Ô Input
Và dưới đây là đoạn code nhé!
ele.addEventListener('focus', function(e) {
// Chọn nội dung đang có trong element
e.target.select();
});
Hiện Hay Ẩn Một Element Nào Đó
Và dưới đây là đoạn code nhé!
element.style.display = 'none';
element.style.display = '';Thêm Class Vào Element
Và dưới đây là đoạn code nhé!
ele.classList.add('class-name');Nếu bạn muốn thêm nhiều class vào một element thì ta có thể viết như sau:
ele.classList.add('class1', 'class2', 'class3');Xoá Class Của Một Element
Và dưới đây là đoạn code nhé!
element.classList.remove('class-name');Nếu bạn muốn xoá nhiều class vào một element thì ta có thể viết như sau:
ele.classList.remove('class1', 'class2', 'class3');Xoá Class Của Một Element
Và dưới đây là đoạn code nhé!
element.classList.remove('class-name');Nếu bạn muốn xoá nhiều class vào một element thì ta có thể viết như sau:
ele.classList.remove('class1', 'class2', 'class3');Kiểm Tra Xem Website Có Đang Chạy Trên Trình Duyệt Mobile Hay Không?
Và dưới đây là đoạn code nhé!
const isMobile = /Android|BlackBerry|iPad|iPod|iPhone|webOS/i.test(navigator.userAgent);Thay Thế Element
Và dưới đây là đoạn code nhé!
ele.parentNode.replaceChild(newElement, ele);Chọn Đối Tượng Theo ID
Và dưới đây là đoạn code nhé!
document.getElementById('hello');Chọn Đối Tượng Theo Tên Class
Và dưới đây là đoạn code nhé!
ele.getElementsByClassName('hello');Chọn Đối Tượng Theo Tên Tag
Và dưới đây là đoạn code nhé!
ele.getElementsByTagName('p');Thiết Lập HTML Cho Element
Và dưới đây là đoạn code nhé!
const html = ele.innerHTML;
ele.innerHTML = '<p>Hello World!</p>';Lấy Nội Dung Khi Người Dùng Selected Text(Bôi Đen Văn Bản)
Và dưới đây là đoạn code nhé!
const selectedText = window.getSelection().toString();Xoá Một Đối Tượng Bằng Javascript
Và dưới đây là đoạn code nhé!
if (ele.parentNode) {
ele.parentNode.removeChild(ele);
}Nếu bạn muốn tham khảo thêm các tip javscript thì truy cập ở đây nhé!
Nếu bạn muốn tham khảo các project javascript dành cho beginner thì truy cập đường dẫn bên dưới nha.
Project Javascript Dành Cho Beginner
Nếu bạn muốn tham khảo các thư viện và framework javascript thì truy cập đường dẫn bên dưới nha.
Thư Viện Và Framework Javascript
Nếu bạn muốn tham khảo các project giúp bạn thực hành html css javascript thì truy cập đường dẫn bên dưới nha.
Project Giúp Bạn Thực Hành HTML CSS Javascript
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức Javascript hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
