Как удалить все встроенные стили с помощью 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?
7 ответов
$('div').attr('style', '');
или
$('div').removeAttr('style');
(от ответ Андре)
чтобы сделать это немного меньше, попробуйте это:
$('div[style]').removeAttr('style');
Это должно немного ускорить его, потому что он проверяет, что divs имеют атрибут стиля.
В любом случае, это может занять некоторое время, чтобы обработать, если у вас есть большое количество divs, поэтому вы можете рассмотреть другие методы, чем javascript.
Простой 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 и выше.
я использовал $('div').attr('style', '');
техника и она не работает в IE8.
я вывел атрибут стиля, используя alert()
и это не было удаление встроенных стилей.
.removeAttr
закончил делать трюк в IE8.
Если вам нужно просто очистить style
элемент нажмите:element.style.cssText = null;
Это должно сделать хорошо. Надеюсь, это поможет!
Это может быть выполнено в два этапа:
1: выберите элемент, который вы хотите изменить, с помощью tagname, id, class и т. д.
var element = document.getElementsByTagName('h2')[0];
- удалить атрибут style
element.removeAttribute('style');