刪除頁面中所有樣式的最簡單方法

我需要使用javascript刪除頁面中的所有樣式定義，以獲得與在Firefox中執行View > Page Style > No Style相同的結果。哪種方法最簡單？刪除頁面中所有樣式的最簡單方法

2012-02-12 tic

可以遞歸迭代通過的所有元素，並刪除style屬性：

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);

要刪除鏈接的樣式表您還可以使用以下代碼片段：

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); 
}

來源

2012-02-12 21:35:40 xandercoded

這將刪除直接應用的樣式元素，但不會影響CSS。 – 2012-02-12 22:30:06

@kennis謝謝你指出 - 只是我的答案... – xandercoded 2012-02-12 22:39:32

你的代碼似乎很有希望。無論如何，我必須運行第二個片段兩次才能生效。爲什麼？ P.S .: .toLowerCase（） – tic 2012-02-12 22:59:51

如果您有jQuery的，你也許可以這樣做

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

來源

2012-02-12 21:35:07 Joe

使用ES6 Array.from

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

來源

2017-02-16 03:30:43 Londeren

這裏是ES6善良，你可以只用一行做。

1）要刪除所有內嵌樣式（如：style="widh:100px"）

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

2）要刪除鏈接外部樣式表（如：<link rel="stylesheet"）

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

3）要刪除所有內嵌樣式標籤（例如：<style></style>）

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

來源

2017-10-16 16:41:47

刪除頁面中所有樣式的最簡單方法

回答

相關問題