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

@John Please stop editing the JavaScript tag out of questions that are about JavaScript. — John Montgomery
– John Montgomery, Commented Feb 11, 2021 at 19:29

Bill Keller · Accepted Answer · 2019-05-09 13:46:59Z

206

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

edited May 9, 2019 at 13:46

Bill Keller

8438 silver badges22 bronze badges

answered Nov 1, 2011 at 19:10

Ben L

2,5811 gold badge16 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pebbl Over a year ago

+1 this definitely solves the problem, rather than the accepted answer. However your old IE fallback should be elem.style.removeAttribute('fontFamily'); I believe..

Tony Over a year ago

+1 definitely the best answer. elm.style.removeProperty() and elm.style.setProperty(). Thanks for showing the light.

NiCk Newman Over a year ago

Didn't even know about removeProperty... lulz, thank you Ben!

Guffa · Accepted Answer · 2010-10-27 12:21:58Z

15

Set the properties to inherit:

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

answered Oct 27, 2010 at 12:21

Guffa

703k111 gold badges760 silver badges1k bronze badges

3 Comments

Rafalages Over a year ago

Thanks alot, it will help me forever... i work with a cms tha allow user to set what he want in the text using tinyMCE.

GetFree Over a year ago

inherit is supposed to inherit the value from the parent, not from a less-precedent style rule

craigpatik Over a year ago

@GetFree is right. You probably don't want to use inherit. Imagine if you set div.style.display = 'inherit' on a div that was inside a list item – the div would end up with display: list-item which is almost certainly not what you intended.

53c · Accepted Answer · 2019-08-16 15:48:08Z

9

In 2019, the simplest way to remove a property seems to be:

elem.style.border = "";

Similarly, to set a border:

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

Should work across all browsers too!

answered Aug 16, 2019 at 15:48

53c

4636 silver badges12 bronze badges

Comments

jwueller · Accepted Answer · 2010-10-27 12:17:03Z

7

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.

answered Oct 27, 2010 at 12:17

jwueller

31.1k5 gold badges69 silver badges71 bronze badges

Comments

lonesomeday · Accepted Answer · 2010-10-27 12:17:26Z

1

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

answered Oct 27, 2010 at 12:17

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Comments

Balaji · Accepted Answer · 2020-09-06 11:07:27Z

1

dynamic add and remove inline style property

var check=()=>{
console.log('test')
var el=document.getElementById("id");

var condition=el.style['color']!=""?true:false;

if(condition){

el.style.removeProperty('color')

}
else{

el.style.color="red"

}


}

<div id="id" style="display:block">dynamic style</div>


<button onclick="check()">apply style</button>

answered Sep 6, 2020 at 11:07

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Comments

Alex P · Accepted Answer · 2010-10-27 12:22:16Z

-2

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

answered Oct 27, 2010 at 12:22

Alex P

12.5k7 gold badges55 silver badges74 bronze badges

Collectives™ on Stack Overflow

Remove a specific inline style with Javascript|jQuery

7 Answers 7

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related