Удалить конкретный встроенный стиль с Javascript | JQuery

Question

У меня есть следующий код в моем 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- размер "и" 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 

Answer 1

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

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

Конечно, IE < 9 не поддерживает это, так что вы должны будете использовать

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

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

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

Answer 2

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

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

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

Answer 3

Мое предложение состояло в том, чтобы держаться подальше от установки этого материала, используя встроенные стили. Я предложил бы использовать классы, а затем с помощью 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'); 

Answer 4

Установите свойства inherit :

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

Answer 5

Из того, что я вижу, вам действительно нужны два разных стиля для абзаца. Это может быть проще установить те в 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');