Làm cách nào để xóa CSS trong JS?

Tìm hiểu cách xóa tất cả kiểu dáng CSS (nội bộ & bên ngoài) khỏi trang web bằng một lệnh JavaScript

Nếu bạn muốn nhanh chóng xem bất kỳ trang web nào trông như thế nào mà không có biểu định kiểu CSS, thì JavaScript là bạn của bạn

Trước tiên hãy mở tab bảng điều khiển DevTools của bạn

• Mac. Tùy chọn + CMD + J
• các cửa sổ. Ca + CTRL + J

Bây giờ hãy dán mã JavaScript này vào dòng lệnh của bảng điều khiển của bạn và nhấn enter

document
  .querySelectorAll('style,link[rel="stylesheet"]')
  .forEach(item => item.remove())

Điều này sẽ xóa cả kiểu CSS nội tuyến và được liên kết (bên ngoài) khỏi trang web bạn đang truy cập

Thí dụ

Xóa tất cả kiểu dáng CSS khỏi một trang hữu ích như thế nào?

Nó cung cấp cho bạn cái nhìn sâu sắc tức thì về cách bất kỳ trang web cụ thể nào được cấu trúc bằng HTML, điều này có thể hữu ích cho bất kỳ ai mới sử dụng HTML hoặc phát triển nói chung

Nó cũng có thể phơi bày những điểm yếu, chẳng hạn như nội dung dư thừa (bạn đã bao giờ ẩn thứ gì đó tạm thời bằng CSS display: none; chưa?)

Trong trường hợp của tôi, khi viết hướng dẫn này, tôi được nhắc nhở rằng một số tệp hình ảnh của tôi quá lớn so với mục đích của chúng, điều này làm chậm trang web của tôi một cách không cần thiết. Rất tiếc. Vâng, nó nằm trong danh sách việc cần làm của tôi và tốt hơn hết là tôi nên sửa nó càng sớm càng tốt để tránh bị ảnh hưởng thêm 🙈

Trong bài viết này, chúng ta sẽ xem cách chúng ta có thể xóa thuộc tính CSS khỏi một thành phần nhất định bằng JavaScript?

HTML

    
    
    
    Removing CSS property
    
    
    
    





    

        
Let's remove some css!
        

            Just a random button!
            
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora quis asperiores dicta quos laborum laboriosam perferendis ab veniam odit saepe, obcaecati officiis iure iste voluptates at quod commodi cupiditate voluptas!
        

    

đầu ra

Chúng ta có thể gọi thuộc tính kiểu của bộ chọn DOM nhất định và sử dụng phương thức thuộc tính loại bỏ để xóa thuộc tính CSS cụ thể đó. Trước tiên, hãy tham chiếu đến tất cả các phần tử DOM

Bây giờ, hãy thử xóa thuộc tính nền khỏi tiêu đề của chúng ta,

heading.style.removeProperty("background");

Ối. Điều đó không hoàn toàn hiệu quả, phải không? . Chúng tôi đang tải các tập lệnh của mình khi toàn bộ trang của chúng tôi tải và các kiểu được viết bên trong biểu định kiểu của chúng tôi. Ngay cả khi chúng tôi xóa một thuộc tính nhất định bằng JavaScript, điều đó sẽ không tạo ra bất kỳ sự khác biệt nào vì phần tử DOM đó cũng được nối với biểu định kiểu và chúng tôi sẽ không xóa bất kỳ loại CSS nào mà chúng tôi đã viết. Bây giờ, hãy cấu trúc lại mã của chúng ta một chút, hãy xóa các kiểu và áp dụng các kiểu đó bằng JavaScript,

đầu ra

Như bạn có thể thấy bây giờ tất cả các kiểu của chúng tôi đã bị xóa. Hãy thêm chúng trở lại trong JavaScript của chúng ta,

đầu ra

Và chúng tôi có phong cách của chúng tôi trở lại. Tuyệt vời. Bây giờ, hãy thử xóa chúng bằng JavaScript của chúng tôi,

heading.style.removeProperty("background");

đầu ra

Tiêu đề của chúng tôi không còn có nền lúa mì. Tuyệt vời. Hãy xóa tất cả các thuộc tính CSS bên trong một hàm và xem liệu chúng ta có quay lại cùng một trang chưa được tạo kiểu không

function removeProperties() {
  document.querySelector('body').style.removeProperty("background");
  heading.style.removeProperty("background");
  heading.style.removeProperty("padding");
  button.style.removeProperty("background");
  para.style.removeProperty("fontWeight");
}

đầu ra

Mọi thứ sẽ giữ nguyên vì chúng ta chưa gọi hoặc gọi hàm của mình, vì vậy hãy thực hiện ngay bây giờ trong bảng điều khiển của chúng ta,

đầu ra

thì đấy. Chúng tôi đã xóa thành công tất cả các thuộc tính CSS của mình bằng JavaScript. Bạn có thể tự kiểm tra xem phương pháp này có hoạt động với các kiểu nội tuyến không?

Giao diện phương thức CSSStyleDeclaration.removeProperty() xóa thuộc tính khỏi đối tượng khai báo kiểu CSS

removeProperty(property)

const declaration = document.styleSheets[0].rules[0].style;
const oldValue = declaration.removeProperty('background-color');

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Tìm thấy một vấn đề nội dung với trang này?

• Chỉnh sửa trang trên Github
• Báo cáo vấn đề nội dung
• Xem nguồn trên GitHub

Trang này được sửa đổi lần cuối vào ngày 13 tháng 9 năm 2022 bởi những người đóng góp MDN

Cách xóa CSS

Làm cách nào để xóa tất cả CSS bằng JS?

Làm cách nào để xóa kiểu trong CSS?

Bạn có thể chỉnh sửa CSS bằng JavaScript không?