CODEWITHSUNDEEP
javascripthtmlcssregexstylesheet
levkaster
levkaster

Reputation: 2730

Remove background style in all html tags using javascript

How can I remove all background="..." in all HTML tags? I understood that it's not a good idea to try parsing HTML with regexes, but I don't know any over way. (tried regex "background([\s\S]*?)(;|\")" - doesn't work). Thanks.

Upvotes: 0

Views: 1162

Answers (4)

Afzal Ahmad
Afzal Ahmad

Reputation: 626

By simple script you can use this code,

    <script>
    var allElements = document.childNodes;
    for (var i = 0; i < allElements.length; i++)
    {
        var currElement = allElements[i];
        if (currElement.hasAttribute("background"))
        {
            currElement.removeAttribute("background");
        }
    }
    </script>


and to solve your mentioned issue,
use this,

use this to solve this issue,
`<script>
        function removeBackground(cElement) {
            var allElements = cElement.childNodes;
            if (allElements.length > 0) {
                for (var i = 0; i < allElements.length; i++) {
                    var currElement = allElements[i];
                    if (currElement.childNodes.length > 0) {
                        removeBackground(currElement);
                    }
                    if (currElement.hasAttribute("background")) {
                        currElement.removeAttribute("background");
                    }
                }
            }
        }
     removeBackground(document);
    </script>`

Upvotes: 2

Hacketo
Hacketo

Reputation: 4997

You could add a custom sheet to override the background property like this 

var style = document.createElement('style');
document.head.appendChild(style);

// Depend on browser implementation
if (style.sheet.insertRule) {
    style.sheet.insertRule("* { background:none !important }", 0);
} 
else if (style.sheet.addRule) {
    style.sheet.addRule("*","background:none !important", 0);
}

Upvotes: 0

Tyr
Tyr

Reputation: 2810

With jQuery you can use a simple selector for that:

$("*").css('background', 'transparent');

background attribute instead of style:

$("*").removeAttr('background');

Without jQuery it's a bit more work to do:

var elements = document.getElementsByTagName("*");

for (var i = 0, i < elements.length; i++) {
    elements[i].style.background = "transparent";
}

Raw background attribute:

var elements = document.getElementsByTagName("*");

for (var i = 0, i < elements.length; i++) {
    if (elements[i].hasAttribute("background")) {
        elements[i].removeAttribute("background");
    }
}

Upvotes: 0

Debasish Pothal
Debasish Pothal

Reputation: 407

$(document).ready(function(){
	$('*').removeAttr('background');
});
<!DOCTYPE html>
<html>
<body background="https://www.google.co.in/images/srpr/logo11w.png">

<h1>Hello world!</h1>
<p>The background attribute is not supported HTML5. Use CSS instead.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

You can use jquery to remove all background property like,

$('*').removeAttr("background");

Upvotes: 1

Related Questions