Remove a specifc inline style with Javascript|jQuery

Answer 1

I think there is no proper solution to this problem (without changing your markup). You could search and replace the style attribute's value:

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

By far the best solution would be to get rid of the inline styles and manage the styles by using classes.

Answer 2

My suggestion would be to stay away from setting this stuff using inline styles. I would suggest using classes and then using jQuery to switch between them:

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 3

Set the properties to inherit:

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

Answer 4

From what I can see you really need two different styles for the paragraph. It might be easier to set those up in CSS and then just use jQuery to remove / add as you need:

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

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

Your initial html will look like:

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

And then to revert to styleTwo in jQuery

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