I have tried everything to remove the inline style from <img> tags in a page. And nothing has worked.

Given rendered html like:

<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /></p>

How can I remove the <style> attribute from all images in page? I have tried removeAttr as well as code from various SO posts and nothing has worked.

EDIT:

I tried

<script>
    $(document).ready(function ($) {
        $('img').each(function () {
            $(this).removeAttr('style')   
        });
    });
</script>

And:

<script>
    $(document).ready(function ($) {
        $('img').removeAttr("style")
     });
</script>

And

<script>
    $(document).ready(function ($) {
        $('img').attr('style', '');
    });
</script>

As well as about 3 or 4 other examples from around the web.

When I view source I see:

 <p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /</p>

Checking in Chrome

I have tried everything to remove the inline style from <img> tags in a page. And nothing has worked.

Given rendered html like:

<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /></p>

How can I remove the <style> attribute from all images in page? I have tried removeAttr as well as code from various SO posts and nothing has worked.

EDIT:

I tried

<script>
    $(document).ready(function ($) {
        $('img').each(function () {
            $(this).removeAttr('style')   
        });
    });
</script>

And:

<script>
    $(document).ready(function ($) {
        $('img').removeAttr("style")
     });
</script>

And

<script>
    $(document).ready(function ($) {
        $('img').attr('style', '');
    });
</script>

As well as about 3 or 4 other examples from around the web.

When I view source I see:

 <p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /</p>

Checking in Chrome

• javascript
• jquery
• css
• html

• $('img').attr('style', ''); – Rob Schmuecker Commented Jul 18, 2014 at 22:28
• 1 $("img").removeAttr("style"); didnt work? – tymeJV Commented Jul 18, 2014 at 22:28
• You sure you used removeAttr correctly? The attribute name would be "style", not "width" or anything inside the style. – Lochemage Commented Jul 18, 2014 at 22:28
• If you say it didn't work, show me the code! – celerno Commented Jul 18, 2014 at 22:29
• 1 You don't show your JS, but possibly you're running outside of a document ready handler, i.e. before the elements are ready. – Mitya Commented Jul 18, 2014 at 22:29

4 Answers 4

Your first try works perfectly:

$(document).ready(function ($) {

    $('img').each(function () {
        $(this).removeAttr('style')

    });

});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<p>
	<img alt="" src="http://lorempixel./32/32" style="width: 620px; height: 395px;" />
</p>

$().removeAttr('style'); works in Safari, Chrome and Firefox (all latest). Not sure on IE, but it certainly should.

$(function() {
   $('img').removeAttr("style");
});

See this jsBin: http://jsbin./yokaxo/1/

In my case the images had their 'height' and 'width' attributes set, so instead of targeting the 'style' attribute, you may need to do this:

$('img').each(function ()
{
    $(this).removeAttr('width');
    $(this).removeAttr('height');
});

Of course you could also remove the style attribute too for pleteness, but that's up to you.

$('img').each(function ()
{
    $(this).removeAttr('width');
    $(this).removeAttr('height');
    $(this).removeAttr('style');
});

Anyway, hope it helps someone.

Use the .removeAttr() method (documentation).