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

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

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

CSS Reset, default styles for common elements

edited May 23 '17 at 12:19

Community

1
1

answered Jan 20 '09 at 05:36

localshred

2,244
1
21
33

The answer: it's painful. Looks like I have to manually declare style for each set of elements, via JS – Jan 20 '09 at 05:47

score 0 · Answer 2 · answered Jan 20 '09 at 05:34

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.

score 0 · Answer 3 · answered Jan 20 '09 at 08:44

0

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.

answered Jan 20 '09 at 08:44

Birk

2,173
4
21
26

score 0 · Answer 4 · answered Jan 20 '09 at 17:24

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 ...

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

4 Answers4

Linked