cách đơn giản nhất để xóa tất cả các kiểu trong một trang

Question

Tôi cần xóa tất cả các định nghĩa kiểu trong một trang bằng cách sử dụng javascript, để có được kết quả tương tự như đang thực hiện View > Page Style > No Style trong Firefox. Đó là cách đơn giản nhất?

Answer 1

Bạn có thể đệ quy lặp qua tất cả các yếu tố và loại bỏ các style thuộc tính:

function removeStyles(el) { 
    el.removeAttribute('style'); 

    if(el.childNodes.length > 0) { 
     for(var child in el.childNodes) { 
      /* filter element nodes only */ 
      if(el.childNodes[child].nodeType == 1) 
       removeStyles(el.childNodes[child]); 
     } 
    } 
} 

removeStyles(document.body); 

Để loại bỏ stylesheets liên kết bạn cũng có thể sử dụng đoạn mã sau:

var stylesheets = document.getElementsByTagName('link'), i, sheet; 

for(i in stylesheets) { 
    sheet = stylesheets[i]; 

    if(sheet.getAttribute('type').toLowerCase() == 'text/css') 
     sheet.parentNode.removeChild(sheet); 
} 

Answer 2

Nếu bạn có jQuery, bạn có lẽ có thể làm điều gì đó như

$('link[rel="stylesheet"], style').remove(); 
$('*').removeAttr('style'); 

Answer 3

Sử dụng ES6 Array.from

Array.from(document.querySelectorAll('link[rel="stylesheet"], style')) 
    .forEach(elem => elem.parentNode.removeChild(elem)); 

Answer 4

Đây là sự tốt lành ES6 bạn có thể làm với chỉ một dòng.

1) Để loại bỏ tất cả các phong cách nội tuyến (ví dụ: style="widh:100px")

Array.from(document.querySelectorAll('[style]')) 
    .forEach(el => el.removeAttribute('style')); 

2) Để xóa liên kết bên ngoài stylesheet (ví dụ: <link rel="stylesheet")

Array.from(document.querySelectorAll('link[rel="stylesheet"]')) 
    .forEach(el => el.parentNode.removeChild(el)); 

3) Để loại bỏ tất cả các thẻ inline style (ví dụ: <style></style>)

Array.from(document.querySelectorAll('style')) 
    .forEach(el => el.parentNode.removeChild(el));