Is it possible to "remove" styling from HTML elements?

Question

I'm wondering if it's possible to restore an element's style to it's "default" state, with Javascript or otherwise.

I need to do this because I'm inserting HTML into 3rd party web pages and cannot control what styles they attribute to different elements. For instance, they may have:

div {
  margin: 10px;
  padding: 5px;
  line-height: 10px;
  font-size: 150%;
  border: 10px solid yellow;
  foo: bar;
}

Is there an easy way to clear out all of the styles and set it back to the "default" settings? Is there even a list of default styles?

Thanks

Answer 1

The default styles are defined by each browser, and as you can guess, all the browsers have it styled a bit differently. You may be able to define each style attribute and assign it to inherit !important:

div {
  margin: inherit !important;
  padding: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  border: inherit !important;
  foo: inherit !important;
}

I am not entirely positive this will work, so I will be looking around and trying it out.

Answer 2

It appears that someone has already asked this question on SO.

http://stackoverflow.com/questions/99643/css-reset-default-styles-for-common-elements

Answer 3

If you can upload your own CSS (or internal stylesheet) you can set the id of an element and those styles will take precedence over the generic div{} styles.

Answer 4

You could always define a class of reset or similar, with all of the default styling rules, and then use JS to apply that style to the elements you want to reset. eg

.reset {
  margin: 0 !important;
  color: #000 !important;
  ... etc ...
}

and then some jQuery like:

$('div').addClass('reset');

Would maybe work ...