How can I "reset" styles for a given HTML element?

Posted by Sambo on Stack Overflow See other posts from Stack Overflow or by Sambo
Published on 2010-06-10T23:30:54Z Indexed on 2010/06/10 23:43 UTC
Read the original article Hit count: 179

Filed under:
|
|

I am working on an embeddable javascript which inserts HTML elements onto unknown pages. I have no control of the stylesheets of the pages I'll be inserting HTML into. The problem is that the HTML I insert will mistakenly stylized by the page, and I want to prevent that.

What's the least verbose and/or resource intensive to go about ensuring the elements I insert are exactly as I'd like them to be? Is there an easy way to clear all styling for a given HTML element and children? In firebug, for instance, you can remove all styling. I feel like there must, and the very least should, be a native way to exempt certain HTML elements from stylesheet rules?

Example:

var myHTML = $("<div>my html in here</div>");
myHTML.resetAllStyles();   //<--- what would this function do?
myHTML.appendTo("body");

I really want to avoid explicitly stating the attributes I want for each element I insert...

PS: I have a lot of experience with JS and CSS, so you can assume that I'll understand pretty much anything you're going to tell me.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css