Remove a specific inline style with Javascript|jQuery

Question

I have the following code in my html:

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

and that in my external css:

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

I want to remove all font-size and font-family in the style atribute, but not the color and others set in external css.

Result expected:

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

Already tried:

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

Answer 1

For those that aren't using jQuery, you can delete specific styles from the inline styles using the native removeProperty method. Example:

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

Of course, IE < 9 doesn't support this so you'll have to use

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

so a cross browser way to do it would be:

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