Cách Reset CSS Bằng JavaScript: Khôi phục Thuộc Tính Mặc Định

Bạn đã bao giờ gặp phải tình huống cần reset CSS về trạng thái mặc định sau khi đã thay đổi nó bằng JavaScript chưa? Việc này có thể phức tạp hơn bạn nghĩ, đặc biệt khi các style được áp dụng theo nhiều cách khác nhau. Bài viết này sẽ cung cấp cho bạn các phương pháp khác nhau để giải quyết vấn đề này một cách hiệu quả, từ những cách cổ điển đến những kỹ thuật hiện đại, giúp bạn kiểm soát hoàn toàn style của trang web. Dù bạn là một lập trình viên frontend mới vào nghề hay một chuyên gia dày dặn kinh nghiệm, hướng dẫn này sẽ giúp bạn tiết kiệm thời gian và công sức.

Tại Sao Cần Reset CSS Bằng JavaScript?

Trong quá trình phát triển web, việc sử dụng JavaScript để thay đổi style của các phần tử là rất phổ biến. Tuy nhiên, đôi khi bạn cần phải khôi phục CSS về trạng thái ban đầu. Điều này có thể xảy ra khi:

• Bạn muốn loại bỏ các thay đổi tạm thời sau một tương tác.
• Bạn cần đồng bộ style giữa các thiết bị hoặc trạng thái khác nhau.
• Bạn muốn đảm bảo tính nhất quán của giao diện người dùng.

Nếu không biết cách reset style CSS một cách chính xác, bạn có thể gặp phải các vấn đề như xung đột style, giao diện không nhất quán, hoặc thậm chí là lỗi hiển thị.

Các Phương Pháp Reset CSS Bằng JavaScript

1. Gán Chuỗi Rỗng cho Thuộc Tính Style

Đây là phương pháp đơn giản và phổ biến nhất. Bạn chỉ cần gán một chuỗi rỗng (`""`) cho thuộc tính style mà bạn muốn reset.

Ví dụ, để reset màu sắc của một phần tử có ID là "myElement", bạn có thể sử dụng đoạn code sau:

    const element = document.getElementById("myElement");
    element.style.color = "";
  

Phương pháp này hoạt động tốt với các style được thêm trực tiếp thông qua JavaScript. Tuy nhiên, nó có thể không hiệu quả nếu style được định nghĩa trong CSS hoặc inline HTML.

2. Sử Dụng `removeAttribute('style')`

Nếu style được định nghĩa trực tiếp trong thuộc tính `style` của phần tử HTML (inline styles), bạn có thể sử dụng phương thức `removeAttribute('style')` để loại bỏ toàn bộ thuộc tính `style`.

Ví dụ:

    const element = document.getElementById("myElement");
    element.removeAttribute('style');
  

Tuy nhiên, hãy cẩn thận khi sử dụng phương pháp này, vì nó sẽ loại bỏ *tất cả* các style inline, kể cả những style bạn muốn giữ lại.

3. Sử Dụng `el.style.property = null`

Gán giá trị `null` cho thuộc tính CSS cũng là một cách để reset nó về giá trị mặc định. Cách này tương tự như gán chuỗi rỗng, nhưng có thể hoạt động tốt hơn trong một số trường hợp, đặc biệt là khi bạn muốn đảm bảo rằng giá trị của thuộc tính sẽ được kế thừa từ CSS hoặc user-agent stylesheet.

Ví dụ:

        const element = document.getElementById("myElement");
        element.style.color = null;
    

4. Sử Dụng CSS Keyword: `unset` và `revert`

CSS cung cấp hai keyword mạnh mẽ để reset style: `unset` và `revert`.

• unset: Đặt thuộc tính về giá trị kế thừa (nếu có) hoặc giá trị khởi tạo mặc định.
• revert: Đặt thuộc tính về giá trị được xác định bởi user-agent stylesheet (style mặc định của trình duyệt).

Để sử dụng chúng, bạn cần áp dụng chúng thông qua JavaScript:

    const element = document.getElementById("myElement");
    element.style.color = "unset";
    // hoặc
    element.style.backgroundColor = "revert";
  

Sự khác biệt chính giữa `unset` và `revert` là `revert` sẽ khôi phục style về giá trị mặc định của trình duyệt, trong khi `unset` có thể kế thừa style từ phần tử cha.

5. Sử Dụng `attributeStyleMap.delete()` (Phương Pháp Hiện Đại)

Phương pháp hiện đại và mạnh mẽ nhất là sử dụng `attributeStyleMap`, một phần của CSS Typed Object Model. Phương pháp này cho phép bạn thao tác trực tiếp với các style properties dưới dạng các đối tượng, thay vì chuỗi.

    const element = document.getElementById("myElement");
    element.attributeStyleMap.delete('color'); // Xóa thuộc tính color
    // Hoặc xóa tất cả các style:
    element.attributeStyleMap.clear();
  

Tuy nhiên, cần lưu ý rằng phương pháp này chưa được hỗ trợ rộng rãi trên tất cả các trình duyệt.

6. Lưu Trữ và Khôi Phục Style Ban Đầu

Nếu bạn cần thay đổi style tạm thời và sau đó khôi phục lại chính xác trạng thái ban đầu, bạn có thể lưu trữ style ban đầu trước khi thực hiện thay đổi.

        const element = document.getElementById("myElement");
        const originalStyle = element.getAttribute('style'); // Lưu style ban đầu

        // Thực hiện các thay đổi style
        element.style.color = "red";
        element.style.fontSize = "20px";

        // Khôi phục style ban đầu
        element.setAttribute('style', originalStyle);
    

Ví Dụ Thực Tế

Giả sử bạn có một nút (button) thay đổi màu nền khi được nhấp vào, và bạn muốn reset màu nền khi nhấp vào lần nữa. Bạn có thể sử dụng phương pháp gán chuỗi rỗng:

    const button = document.getElementById("myButton");
    let isColored = false;

    button.addEventListener("click", () => {
      if (isColored) {
        button.style.backgroundColor = ""; // Reset màu nền
      } else {
        button.style.backgroundColor = "blue";
      }
      isColored = !isColored;
    });
  

Lưu Ý Quan Trọng

• **Tính Đặc Thù (Specificity):** CSS có tính đặc thù, nghĩa là một số style sẽ được ưu tiên hơn các style khác. Đảm bảo rằng phương pháp reset của bạn có đủ "sức mạnh" để ghi đè các style hiện tại.
• **Thứ Tự Style:** Thứ tự mà các style được áp dụng cũng rất quan trọng. Style được định nghĩa sau sẽ ghi đè các style được định nghĩa trước.
• **Kiểm Tra Trình Duyệt:** Một số phương pháp có thể hoạt động khác nhau trên các trình duyệt khác nhau. Hãy kiểm tra kỹ lưỡng trên các trình duyệt phổ biến.

Kết Luận

Việc reset CSS bằng JavaScript có thể được thực hiện bằng nhiều phương pháp khác nhau, tùy thuộc vào tình huống cụ thể. Bằng cách hiểu rõ các phương pháp này và các lưu ý quan trọng, bạn có thể kiểm soát hoàn toàn style của trang web và tạo ra trải nghiệm người dùng tốt hơn. Hãy thử nghiệm và tìm ra phương pháp phù hợp nhất với dự án của bạn!