Thêm nhiều style cho phần tử với raw vanilla JavaScript hơi rườm rà. Cách phổ biến nhất tôi thấy để style phần tử với plain JavaScript là lấy phần tử mục tiêu, rồi thêm từng style một:
// Lấy phần tử mục tiêu (tại đây qua class attribute) const buttonAddToCart = document.querySelector(".button-add-to-cart") // Thêm thuộc tính style, từng cái một buttonAddToCart.style.backgroundColor = "#82b97e" buttonAddToCart.style.color = "#fff" buttonAddToCart.style.padding = "24px" buttonAddToCart.style.textTransform = "uppercase" buttonAddToCart.style.letterSpacing = "0.1em"Nó chạy, nhưng thừa thãi, lặp lại nhiều, và không tái sử dụng code. Giống như dùng anonymous function thay vì named function.
Thay vào đó, bạn có thể dùng đối tượng style:
// Tạo đối tượng style const buttonPrimary = { backgroundColor: "#82b97e", color: "#fff", padding: "24px", textTransform: "uppercase", letterSpacing: "0.1em", } // Gán buttonPrimary (style object) cho phần tử button Object.assign(buttonAddToCart.style, buttonPrimary)Cách này không chỉ gọn gàng hơn, mà còn áp dụng đối tượng style buttonPrimary cho bất kỳ nút button nào cần style primary, tránh viết code lặp lại.
Ví dụ mã áp dụng style object cho nhiều phần tử
Tại sao dùng JavaScript để style phần tử HTML thay vì CSS?
Xin lỗi, tôi không nhảy vào cái bẫy, CSS in JS, hoặc JSS, là chủ đề nóng trong cộng đồng CSS & JS, nhưng tôi không có phe nào. Tôi thích cả hai. Tôi gợi ý dùng ngữ cảnh làm động lực cho quyết định bạn đưa ra.
Nhưng tôi sẽ lập luận cho trường hợp style bằng JavaScript hữu ích. Giả sử bạn ở tình huống không có quyền truy cập trực tiếp file CSS stylesheet định nghĩa style cho phần tử. Trong tình huống này, có thể style/ghi đè style hiện có với JavaScript là khác biệt giữa giải quyết vấn đề khách hàng nhanh, hoặc có thể không giải quyết được hôm đó.
Trong loại kịch bản này, tính linh hoạt của JavaScript tỏa sáng.