Удаление определенных inline стилей с div в HTML

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для быстрого удаления инлайновых стилей с элемента примените следующий код на чистом JavaScript:

Скопировать код

// Очищаем все инлайновые стили у элемента
document.getElementById('elementId').style.cssText = '';
// Удаляем конкретное свойство стиля:
document.getElementById('elementId').style.color = '';

Удаление отдельных инлайновых стилей

Если вы хотите удалить только определённые стили, оставив остальные, вот как это можно сделать:

Скопировать код

let element = document.getElementById('elementId');
element.style.removeProperty('width');  // Удаляем ширину
element.style.removeProperty('height'); // Удаляем высоту

// Если требуется поддержка Internet Explorer
element.style.width = ''; 
element.style.height = ''; // Все следы высоты стираются.

Теперь стили width и height полностью удалены из вашего документа.

Удаление упорных и внешних стилей

Если вам нужно справиться со стилями, которые сложно подавить, или внешними стилями, можно применить регулярные выражения:

Скопировать код

let element = document.getElementById('elementId');
let stylesToRemove = ['width', 'height'];
let newStyle = element.style.cssText.replace(
  new RegExp(stylesToRemove.join('|'), 'gi'), // Теперь "регулярные выражения" приходятся как нельзя кстати
  ''
);
element.style.cssText = newStyle;

Таким образом, мы эффективно находим и удаляем нежелательные стили из кода.

Визуализация

Удаление стилей с элемента можно сравнить с генеральной уборкой:

Markdown

Скопировать код

Коробка: 📦   Загромождённая коробка (После вечеринки): 📦+🎉+🍕+🍻   
Очищенная коробка (После уборки): 📤

Вот как происходит процесс «уборки»:

Скопировать код

element.style.property = '';  // Уведомляем свойство, что оно больше ненужно

И вот результат:

Markdown

Скопировать код

До: 📦 + 🏷️
После: 📤

Весь набор стилей, которые вы добавили к элементу, теперь успешно удалён!

Возврат к значениям стилей по умолчанию

Иногда вместо полного удаления стиля предпочтительнее просто восстановить его значение по умолчанию:

Скопировать код

document.getElementById('elementId').style.setProperty('width', 'unset'); // Действие, аналогичное операции "отмена" для стиля.

Использование циклов для массовых операций

Циклы — отличный инструмент при работе сразу с несколькими элементами:

Скопировать код

Array.from(document.getElementsByClassName('remove-styles')).forEach(el => {
  el.style.cssText = '';  
  // Таким образом, можно эффективно и быстро очистить группу элементов от инлайновых стилей.
});

Необходимость аккуратности при переопределении стилей

После удаления атрибута "style", не забудьте вернуть нужные стили:

Скопировать код

let element = document.getElementById('elementId');
element.removeAttribute('style'); // Полностью удаляем все стили
// Восстанавливаем необходимые нам стили
element.style.color = 'red';

Выбор подходящего события для обработчика

Выбор правильного события для удаления стилей может значительно повысить эффективность вашего кода:

Скопировать код

document.getElementById('elementId').addEventListener('click', function() {
  this.style.cssText = ''; // Удаляем стили при клике на элемент
});

Полезные материалы

Element: removeAttribute() method – Web APIs | MDN — Подробное руководство по удалению атрибутов HTML-элементов.
HTML DOM Element removeAttribute() Method — Простое руководство по удалению атрибута.
When Using !important is The Right Choice | CSS-Tricks — Правильное использование !important в CSS.
.css() | jQuery API Documentation — Применение jQuery для работы со стилями.
Selectors Level 3 — Глубокое погружение в мир CSS-селекторов от W3C.
web.dev — Все, что вам нужно знать о современных веб-технологиях.