Tìm hiểu cách tạo và thêm thuộc tính HTML với JavaScript.
Giả sử bạn có một nút bấm trên trang web được thiết kế để thực thi một hàm khi bạn nhấp vào nó. Thật không may, ai đó quên thêm giá trị ID hoặc class cho nút bấm, và bạn không có quyền truy cập trực tiếp vào mã HTML ngay bây giờ.
May mắn thay, bạn có thể tạo một thuộc tính và gắn nó vào phần tử nút bấm bằng JavaScript.
Chúng ta cần làm 3 việc:
- Tạo một thuộc tính kiểu
id - Cho nó một giá trị (tên)
- Thêm thuộc tính+giá trị mới vào phần tử nút bấm
Mã HTML
Trước tiên, nút bấm HTML, mà tiếc thay không có thuộc tính ID (buhu), chưa:
<button>Nhấp vào tôi!</button>JavaScript
Chọn nút bấm của bạn dùng querySelector():
const button = document.querySelector('button')Lưu ý:
Nếu trang web của bạn có nhiều hơn một nút bấm, bạn luôn có thể chỉ định bộ chọn bằng cách xâu chuỗi. Ví dụ, nếu nút bấm liên quan nằm bên trong phần tử div có id hoặc class duy nhất, ví dụ:
const button = document.querySelector('.service-section button')Ghi chú kết thúc.
Ối, bây giờ hãy tạo thuộc tính kiểu id:
const attribute = document.createAttribute('id')Và cho nó một giá trị (tên):
attribute.value = `js-button-run-function`Bây giờ gán thuộc tính mới tạo của bạn vào phần tử nút bấm:
button.setAttributeNode(attribute)Xong!
Bây giờ nếu bạn in biến button ra console, bạn sẽ thấy nút bấm của bạn đã được nâng cấp:
console.log(button) // output: "<button id='js-button-run-function'>Nhấp vào tôi</button>"Tuyệt, bây giờ bạn có thể dùng JavaScript để chọn nút bấm này dựa trên ID duy nhất của nó, và tạo hàm sẽ chạy khi người dùng nhấp vào nút bấm.
Cho chắc ăn, hãy xác nhận nó hoạt động. Thêm mã này vào file JavaScript của bạn:
// Chọn nút bấm qua giá trị id mới const buttonRunFunction = document.querySelector('#js-button-run-function') // Khi nhấp hiện hộp cảnh báo buttonRunFunction.addEventListener('click', function() { alert('Nó hoạt động!') })Nếu bạn làm đúng mọi thứ, bạn sẽ thấy hộp cảnh báo nói "Nó hoạt động!" bật lên khi bạn nhấp vào nút bấm.
Tất cả mã:
const button = document.querySelector('button') const attribute = document.createAttribute('id') attribute.value = `js-button-run-function` // Gán thuộc tính mới vào nút bấm button.setAttributeNode(attribute) // Chọn nút bấm qua id const buttonRunFunction = document.querySelector('#js-button-run-function') // Thêm sự kiện click vào nút bấm buttonRunFunction.addEventListener('click', function() { alert('it works!') })