Как удалить конкретные CSS свойства из встроенных стилей с помощью JavaScript

Оффтоп javascript
1

У меня есть элемент HTML с инлайновыми стилями:

<div id='content' style='text-align:left; font-size:16px; font-family:times; color:blue'>Привет мир</div>

И вот что в моем внешнем CSS:

#content { font-size:12px; font-family:helvetica; color:#333; }

Я хочу убрать только свойства font-size и font-family из атрибута style, но оставить color и другие стили из внешнего CSS без изменений.

Что я ожидаю в результате:

<div id='content' style='text-align:left; color:blue'>Привет мир</div>

Я уже пробовал это:

$('#content').removeAttr('style');     // Удаляет все инлайновые стили
$('#content').css('font-family', '');  // Убирает и стили из внешнего CSS

Как написать код, чтобы удалить только определенные свойства из инлайновых стилей, не затрагивая правила внешнего CSS? Может, есть какой-то способ работать с атрибутом style напрямую?

2

А можно через cssText попроще сделать. Берешь все стили элемента, чистишь что не нужно и записываешь обратно:

const el = document.getElementById('content');
el.style.removeProperty('font-size');
el.style.removeProperty('font-family');

Удалятся только инлайновые свойства, внешние останутся. Кстати, зачем вообще такая задача? Может проще стили изначально по-другому организовать?

3

Можно разобрать атрибут style вручную и пересобрать без ненужных свойств:

const element = document.getElementById('content');
const currentStyle = element.getAttribute('style');
const stylePairs = currentStyle.split(';');
const filteredStyles = stylePairs.filter(pair => {
    const property = pair.split(':')[0].trim();
    return property !== 'font-size' && property !== 'font-family';
});
element.setAttribute('style', filteredStyles.join(';'));

Так работаешь именно с инлайновым атрибутом, не трогая внешний CSS. После split проверяй на пустые строки — могут быть артефакты.