Как удалить все встроенные стили с помощью 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?

84
css inline javascript jquery

7 ответов

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

или

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

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

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

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

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

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

Простой 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 и выше.

19

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

я вывел атрибут стиля, используя alert() и это не было удаление встроенных стилей.

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

3

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

3

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

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

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

  1. удалить атрибут style

element.removeAttribute('style');

1

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

-2