Cách thêm nhiều kiểu vào một phần tử bằng JavaScript thô (không có jQuery!)

Việc thêm nhiều kiểu vào một phần tử với JavaScript thô sơ có thể cảm thấy hơi khó hiểu. Cách tiếp cận phổ biến nhất mà tôi đã thấy để tạo kiểu cho các phần tử bằng JavaScript thuần túy là lấy phần tử mục tiêu của bạn, sau đó thêm một kiểu vào mỗi lần:

// Grab target element (here via its class attribute)
const buttonAddToCart = document.querySelector(".button-add-to-cart")

// Add style properties, one at a time
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"

Nó hoạt động, nhưng nó thừa, có quá nhiều sự lặp lại và bạn không thể sử dụng lại mã của mình. Nó giống như sử dụng một hàm ẩn danh thay vì một hàm được đặt tên.

Thay vì làm như trên, bạn có thể sử dụng đối tượng kiểu:

// Create a style object
const buttonPrimary = {
  backgroundColor: "#82b97e",
  color: "#fff",
  padding: "24px",
  textTransform: "uppercase",
  letterSpacing: "0.1em",
}

// Assign buttonPrimary (style object) to button element
Object.assign(buttonAddToCart.style, buttonPrimary)

Cách tiếp cận này không chỉ gọn gàng hơn mà bạn còn có thể áp dụng buttonPrimary này đối tượng kiểu cho bất kỳ phần tử nút nào cần kiểu nút chính và tránh viết mã lặp lại.

Ví dụ mã về việc áp dụng đối tượng kiểu cho nhiều phần tử

Chờ đã, tại sao bạn lại sử dụng JavaScript để tạo kiểu HTML thay vì CSS?

Xin lỗi, tôi không chấp nhận, CSS trong JS hoặc JSS, là một chủ đề sôi nổi trong bối cảnh CSS &JS, nhưng tôi không có con chó nào trong cuộc chiến này. Tôi thích cả hai cách tiếp cận. Tôi đề nghị bạn sử dụng ngữ cảnh là người điều khiển các quyết định mà bạn đưa ra.

Nhưng tôi sẽ đưa ra một trường hợp khi việc tạo kiểu bằng JavaScript có thể trở nên hữu ích. Giả sử bạn đang ở trong tình huống không có quyền truy cập trực tiếp vào biểu định kiểu CSS xác định kiểu trên một phần tử. Trong tình huống này, việc có thể tạo kiểu / ghi đè các kiểu hiện có bằng JavaScript có thể là sự khác biệt giữa việc giải quyết vấn đề của khách hàng của bạn nhanh chóng hoặc có thể là không giải quyết được vấn đề vào ngày hôm đó.

Trong loại kịch bản này, tính linh hoạt của JavaScript thể hiện rõ ràng.