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

94

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

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

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

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

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

— Мэтт
источник

166

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

или

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

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

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

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

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

— Тайлер Картер
источник

Если ему нужно удалить атрибут стиля, ему также придется его искать, поэтому последнее решение, похоже, только делает код грязнее imho. Лучше всего, конечно, выбрать только те элементы, которые вам нужны для удаления стиля, возможно, через ID.

— Хосе Фаэти

Это будет нацелено только на div. Что, если вы хотите нацеливаться на все?

— уличный фонарь

1

Кроме того, вызов .css()с пустой строкой в качестве второго значения удалит только указанное значение из встроенных стилей, например $ ('div'). Css ('display', ''); удалит только встроенное свойство отображения (если установлено).

— Том Дэвис

2

@streetlight Используйте $('*').removeAttr('style')для нацеливания на все.

— Makaze

Нет, на самом деле второй должен быть немного быстрее, потому что, если JQuery имеет смысл, он будет использовать стандартный атрибут remove. Кроме того, вы забываете о огромных неэффективных накладных расходах на цикл через большее количество элементов DOM, что делает второй метод даже быстрее, чем первый.

35

Обычный 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 и выше.

— Джош Крозье
источник

1

Альтернативой Array.prototype.forEach.callявляется довольно хорошо поддерживается оператором восклицательный знак, который сохраняет строку: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

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

— андрес дескальцо
источник

Это более эффективно, чем использование attr ('style', '')?

— Мэтт

с помощью $ ('div'). attr ('стиль', ''); <div style = ""> </div> с $ ('div'). removeAttr ('style'); <div> </div> более чистый

— андрес дескальцо

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

— Тайлер Картер,

да, это понятно, он должен быть заменен на ID $ ( "# ид") или класса $ (».classDivs)

— Andres descalzo

3

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

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

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

— Ртвендж
источник

3

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

— Тушар Шукла
источник

Похожая логика, кажется, применима, если вы пытаетесь «очистить» только одно свойство стиля для элемента: element.style.display = null;- вот что мне нужно: D

— Билал Акил

2

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

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

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

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

element.removeAttribute('style');

— JRulle
источник

-2

Вы также можете попробовать указать CSS в таблице стилей как! Important

— BoringCode
источник

3

хотя это сработает, ужасная практика - просто переопределять встроенные стили с помощью! important, чтобы удалить их

— joshvermaire