Remove a specific inline style with Javascript|jQuery

javascript, jquery

Solution

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');
}

Problem

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 ```

Original source