Как я могу удалить все встроенные стили с помощью javascript и оставить только стили, указанные в таблице стилей css?

Если в моем html есть следующее:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

И это в моей таблице стилей CSS:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

Есть ли способ, с javascript/jquery, удалить все встроенные стили и оставить только стили, указанные в таблице стилей CSS?

Ответ 1

$('div').attr('style', '');

или

$('div').removeAttr('style'); (Из Андрес ответ)

Чтобы сделать это немного меньше, попробуйте следующее:

$('div[style]').removeAttr('style');

Это должно ускорить его, потому что он проверяет, что у div есть атрибут стиля.

В любом случае, это может занять немного времени, чтобы обрабатывать, если у вас большое количество div, поэтому вы можете рассмотреть другие методы, чем javascript.

Ответ 2

$('div').removeAttr('style');

Ответ 3

Обычный JavaScript:

Вам не нужно jQuery, чтобы сделать что-то тривиальное, как это. Просто используйте метод .removeAttribute().

Предполагая, что вы просто нацеливаете на один элемент, вы можете легко использовать следующее: (пример)

document.querySelector('#target').removeAttribute('style');

Если вы нацеливаете несколько элементов, просто проведите по выделенной коллекции элементов: (пример)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach() - IE9 и выше /.querySelectorAll() - IE 8 (частичный) IE9 и выше.

Ответ 4

Я использовал метод $('div').attr('style', '');, и он не работал в IE8.

Я вывел атрибут стиля с помощью alert(), и он не удалял встроенные стили.

.removeAttr закончил делать трюк в IE8.

Ответ 5

Если вам нужно просто удалить style элемента, то:
element.style.cssText = null;
Это должно делать добро. Надеюсь, это поможет!

Ответ 6

Это может быть выполнено в два этапа:

1: выберите элемент, который вы хотите изменить, с помощью тэга, id, класса и т.д.

var element = document.getElementsByTagName('h2')[0];

удалить атрибут стиля

element.removeAttribute('style');

Ответ 7

Вы также можете попробовать перечислить css в таблице стилей как важно!