Can i remove inline styles with jQuery?

Question

I want to remove inline style from a span or div or ...

<span style="font-size: 8pt;">some texts</span>

Can i remove font-size from span with jQuery ?

score 3 · Accepted Answer · answered Jul 17 '17 at 15:46

3

If you want to remove the entire style attribute then you can use removeAttr('style');

$('span').removeAttr('style');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size: 8pt; color: #c00;">some texts</span>

If you want to override the setting back to default whilst retaining other inline styles, use css('font-size', 'inherit');

$('span').css('font-size', 'inherit');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size: 8pt; color: #c00;">some texts</span>

answered Jul 17 '17 at 15:46

Rory McCrossan

3

Yep, stated that in the answer: `If you want to remove the entire style attribute...` – Rory McCrossan Jul 17 '17 at 15:47
Better to use css in a separate file, then remove and add classes or ids to manipulate your content with javacript/jquery. Do you have access to the html? – DraganAscii Jul 17 '17 at 17:55

score 0 · Answer 2 · answered Jul 17 '17 at 15:49

0

If you want to completely removed the inline styles in any of your html elements.

You can you the removeAttr method provided by jQuery.

$('span, div').removeAttr('style');

answered Jul 17 '17 at 15:49

Den Isahac

score 0 · Answer 3 · answered Jul 17 '17 at 15:55

Remove inline style

$('span').removeAttr('style');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size: 8px; color: red">some texts</span>

Update multiple property in css

$('span').css({
  'font-size' : '20px',
  color: 'blue'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size: 8pt;">some texts</span>

Update single property using css

$('span').css('font-size', '20px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="font-size: 8pt;">some texts</span>

3 Answers3