Phương thức setAttribute() trong JavaScript
Bùi Tấn Lực - 921
- 11/09/2025
Chức năng của Phương thức setAttribute() trong JavaScript
Phương thức setAttribute() trong JavaScript dùng để thay thế giá trị của một thuộc tính trong một thẻ HTML.
Cú pháp của Phương thức setAttribute() trong JavaScript
phantu.setAttribute("thuoctinh","giatri");
phantu: là đối tượng HTML.
thuoctinh: thuộc tính trong thẻ HTML.
giatri: Giá trị cần thay vào, nếu dùng biến thì bỏ dấu nháy kép.
Code Phương thức setAttribute() trong JavaScript
hinhid.setAttribute("src", datahover);
<img id="hinhid" src="https://webmoi.vn/media/images/logo-web-moi.png" alt="Web Mới" title="Công ty Web Mới" data-hover="https://webmoi.vn/upload/tinblog/phuong-thuc-setattribute-trong-javascript.jpg" >
<script>
var hinhid = document.getElementById('hinhid');
var src = hinhid.getAttribute('src');
var datahover = hinhid.getAttribute('data-hover');
// rê chuột vào
hinhid.addEventListener('mouseover', function(){
hinhid.setAttribute("src", datahover);
});
// bỏ chuột ra
hinhid.addEventListener('mouseout', function(){
hinhid.setAttribute("src", src);
});
</script>
Những lưu ý khi sử dụng setAttribute() trong JavaScript
Khi làm việc với setAttribute(), điều quan trọng không chỉ là biết cách thêm hoặc thay đổi thuộc tính cho phần tử HTML. Cách chọn thuộc tính, giá trị và phương thức thao tác phù hợp sẽ giúp mã JavaScript dễ kiểm soát hơn, đặc biệt khi trang có nhiều phần tử được cập nhật động.
setAttribute() tạo mới hay thay đổi thuộc tính HTML?
setAttribute() có thể đảm nhiệm cả hai trường hợp. Nếu thuộc tính chưa tồn tại, phương thức này sẽ tạo thuộc tính mới. Nếu thuộc tính đã có, giá trị cũ sẽ được thay thế bằng giá trị mới.
Ví dụ, đoạn mã sau thiết lập lại địa chỉ liên kết cho một phần tử:
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
Nếu phần tử a chưa có thuộc tính href, thuộc tính này được thêm vào. Nếu đã có href, giá trị hiện tại sẽ được thay thế. Vì vậy, không cần kiểm tra riêng thuộc tính có tồn tại trước khi gọi setAttribute() trong những trường hợp chỉ cần thiết lập một giá trị xác định.
Giá trị truyền vào setAttribute() được xử lý dưới dạng chuỗi. Do đó, khi thiết lập thuộc tính có giá trị số hoặc giá trị logic, nên chủ động xác định cách biểu diễn phù hợp với thuộc tính HTML đang sử dụng.
Cách sử dụng setAttribute() với thuộc tính data-*
Thuộc tính data-* thường được dùng để lưu dữ liệu tùy chỉnh ngay trên phần tử HTML. setAttribute() là một cách trực tiếp để thêm hoặc cập nhật loại dữ liệu này.
const product = document.querySelector(".product");
product.setAttribute("data-id", "1024");
product.setAttribute("data-status", "active");
Sau khi thực thi, phần tử sẽ có các thuộc tính data-id và data-status. JavaScript có thể đọc lại những giá trị này bằng getAttribute() khi cần xử lý.
Với dữ liệu data-*, nên đặt tên thuộc tính rõ ràng và chỉ lưu những thông tin thực sự cần thiết cho thao tác phía trình duyệt. Nếu sử dụng quá nhiều dữ liệu trên phần tử, mã HTML có thể trở nên khó theo dõi và bảo trì.
Khi nào nên dùng setAttribute() thay vì gán thuộc tính trực tiếp?
setAttribute() phù hợp khi bạn cần thao tác với tên thuộc tính HTML một cách rõ ràng, đặc biệt khi tên thuộc tính được xác định động hoặc khi đang làm việc với các thuộc tính tùy chỉnh như data-*.
Trong những trường hợp thuộc tính có API DOM riêng, cách gán trực tiếp đôi khi ngắn gọn và dễ đọc hơn. Chẳng hạn, với thuộc tính value của một ô nhập liệu, có thể gán giá trị thông qua thuộc tính DOM tương ứng.
const input = document.querySelector("input");
input.value = "Nguyễn Văn A";
Ngược lại, khi mục tiêu là thao tác trực tiếp với thuộc tính HTML hoặc xây dựng tên thuộc tính từ dữ liệu, setAttribute() thường thể hiện đúng ý định hơn.
Vì vậy, không nên xem setAttribute() là phương án thay thế cho mọi cách thay đổi thuộc tính. Hãy chọn phương thức dựa trên loại dữ liệu cần cập nhật và mục đích của thao tác để mã JavaScript rõ ràng, dễ bảo trì.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức setAttribute() trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
