Удалите определенный встроенный стиль с помощью Javascript | jQuery

У меня есть следующий код в моем html:

<p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p>

и что в моем внешнем css:

#foo{ font-size:11pt; font-family:arial; color:#000; }

Я хочу удалить все "font-size" и "font-family" в атрибуте "style", но не "цвет" и другие, установленные во внешнем css.

Ожидаемый результат:

<p id='foo' style='text-align:center; color:red'>hello world</p>

Уже пробовали:

$('#foo').removeAttr('style');   // That removes all inline
$('#foo').css('font-family',''); // That remove the css setted too

Ответы

Ответ 1

Для тех, кто не использует jQuery, вы можете удалить определенные стили из встроенных стилей, используя собственный метод removeProperty. Пример:

elem.style.removeProperty('font-family');

Конечно, IE & lt; 9 не поддерживает это, поэтому вам придется использовать

elem.style.removeAttribute('font-family');

так что кросс-браузерный способ сделать это будет:

if (elem.style.removeProperty) {
    elem.style.removeProperty('font-family');
} else {
    elem.style.removeAttribute('font-family');
}

Ответ 2

Задайте свойства inherit:

$('#foo').css('font-family','inherit').css('font-size','inherit');

Ответ 3

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

var element = $('#foo');
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, ''))

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

Ответ 4

Мое предложение состояло в том, чтобы держаться подальше от установки этого материала, используя встроенные стили. Я предлагаю использовать классы, а затем с помощью jQuery переключаться между ними:

CSS

#foo{ font-size:11pt; font-family:arial; color:#000; }
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red}

HTML:

<p id="foo" class="highlight">hello world</p>

JavaScript:

$('#foo').removeClass('highlight');
$('#foo').addClass('highlight');

Ответ 5

В 2019 году самый простой способ удаления свойства выглядит следующим образом:

elem.style.border = "";

Аналогично, чтобы установить границу:

elem.style.outline = "1px solid blue";

Должно работать во всех браузерах!

Ответ 6

Из того, что я вижу, вам действительно нужны два разных стиля для абзаца. Возможно, было бы проще установить их в CSS, а затем просто использовать jQuery для удаления/добавления по мере необходимости:

#styleOne { color: red; font: normal 14pt Verdana; text-align: center; }

#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; }

Ваш начальный html будет выглядеть так:

<p id="styleOne">hello world</p>

А затем вернуться к styleTwo в jQuery

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');