Самый простой способ удалить все стили на странице

Question

Мне нужно удалить все определения стилей на странице, используя javascript, чтобы получить тот же результат, что и View > Page Style > No Style в Firefox.Какой самый простой способ?

Answer 1

Вы можете рекурсивно итерировать через все элементы и удалить атрибут 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);
}

Answer 2

Если у вас есть jQuery, вы, вероятно, можете сделать что-то вроде

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

Answer 3

Вот добродетель ES6, которую вы можете сделать только одной строкой.

1) Чтобы удалить все встроенные стили (например: style="widh:100px")

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

2) Чтобы удалить ссылку на внешнюю таблицу стилей (например: <link rel="stylesheet")

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

3) Чтобы удалить все теги встроенного стиля (например: <style></style>)

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

Answer 4

На самом деле, document.querySelectorAll возвращает NodeList, который имеет метод forEach.

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