Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript

Clear All Page Style For A Specific Div And It's Child Elements

Post a Comment
I have some html being embeded on websites but is gets messed by the page it's embeded in's css. How can I make it so that doesnt happen... My content has a specific ID and it's cs

Solution 1:

Provided I understood your question correctly, you could recursively iterate through the child elements of your div with JavaScript and reset the class and style attributes. See this fiddle or the following code snippet:

<html><head><styletype="text/css">.aClass {
                font-size: 0.75em;
            }

            .anotherClass {
                font-weight: bold;
                color: Fuchsia;
            }
        </style><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">functionremoveStuff(elem) {
                elem.children().each(function() {
                    if ($(this).children().length > 0) {
                        $(this).removeClass();
                        $(this).removeAttr('style');
                        removeStuff($(this));
                    } else {
                        $(this).removeClass();
                        $(this).removeAttr('style');
                    }
                });
            }
        </script></head><body><divid="myDiv"><spanclass="aClass">This span is classy.</span><divstyle="font-size: 2em;">
                This div has style.
                <spanclass="anotherClass">Lorem Ipsum.</span></div></div><ahref="javascript:removeStuff($('#myDiv'));">Remove classes &amp; styles</a></body></html>

Solution 2:

Target you specific content always through the ID and add specific classes. In addition, add !important to every rule in your CSS. And override all things you need to stay the same.

Other solution would be to use inline CSS for your content.

Post a Comment for "Clear All Page Style For A Specific Div And It's Child Elements"