Any way to disable CSS via javascript?

[sammati]

I'm inserting elements into the DOM, but don't want them to inherit
*any* css at all (I can't control the CSS). Does anyone know if this
is possible?

I tried: element.style = null; But this doesn't work. I get an
error that "style" is read-only.

Am I going to have to loop over every possible style property and set
it to some "default" value?

eg:
//yes, i know, it's not proper JS. I forgot how to iterate over
objects.
defaults = {color: 'black', background: 'transparent', ... lots of
work ... };
foreach (defaults as key=>value){
eval("element.style." + key) = value;
}

That would suck.

Any ideas?

Thanks.
-sam

[Dan Rumney]

On Jun 5, 1:34 pm, [e-mail] wrote:

I'm inserting elements into the DOM, but don't want them to inherit
*any* css at all (I can't control the CSS). Does anyone know if this
is possible?

Something to bear in mind is that all elements have *some* kind of
styling applied. Section 6.4 of the CSS 2.1 specification (http://
www.w3.org/TR/CSS21/cascade.html#cascade) shows that Styles either
come from the Author, the User, or the User-Agent.

I don't make this point to be persnickety; rather, to suggest that the
way to approach this is to work out what you mean by *no* CSS and go
on from there.

I'm going to hazard a guess that by *no* CSS, you mean the kind of
styling that you would get in the absence of a stylesheet.

So, one option would be to add a new stylesheet like the sample one
provided in section 6.4 (mentioned above), but add a class selector to
each style. Something like 'defaultStyling' might do.

Then, with each new element that you create, set the class to
defaultStyling. You might hit some wrinkles with specificity, but this
an approach to consider.


[snip]

[sammati]

I'm going to hazard a guess that by *no* CSS, you mean the kind of

styling that you would get in the absence of a stylesheet.

Correct. Persnickety or not, good point. Let's just say I'd define
my own "defaults".

You suggest creating a stylesheet which defines all the "default"
styles that I'd be happy with for each classed element type
(defaultStyling div, defaultStyling h1, defaultStyling h2, ...many
more...). Problem is, within each element type's style I'd have to
find out which attributes could be inherited, and set them to the
"default" value, correct?

For example if the page originally defines: "h1 { color: red; }", my
"defaulter" stylesheet must say "defaultStyling h1 { color: black; }",
color being just one of the many attributes which could be inherited
for h1.

I'm guessing this would be quite a large stylesheet and I know it
would take a lot of time to make. I'd much prefer something
programmatic, if possible.

However, it is a viable solution and if worse comes to worse it'll be
the path I take and I thank you for it.

Any other ideas?

-sam

[snip]

[snip]

[Dan Evans]

On Jun 5, 11:49 am, [e-mail] wrote:

I'm going to hazard a guess that by *no* CSS, you mean the kind of
styling that you would get in the absence of a stylesheet.

Correct. Persnickety or not, good point. Let's just say I'd define
my own "defaults".

You suggest creating a stylesheet which defines all the "default"
styles that I'd be happy with for each classed element type

....

I'm guessing this would be quite a large stylesheet and I know it
would take a lot of time to make.

I actually don't think it would be a very large sheet in the end.
Maybe a couple hundred lines (and I'm including lines used for just
brackets and the formatting used to put a single property/value on a
line).

I'd much prefer something programmatic, if possible.

However, it is a viable solution and if worse comes to worse it'll be
the path I take and I thank you for it.

My other idea (which I haven't expressly tested for this
recommendation but I have used in the past to "sandbox" CSS is to use
an iframe. Content loaded into an iframe should not inherit styles of
the containing page and should be able to load its own CSS that won't
affect the elements of the page containing it.
This is not really a JS solution so I'm not sure if this list is the
right place to troubleshoot if you do pursue an iframe solution not
that it was a bad place for the initial inquiry.

- Dan Evans