Dave, got a JS, CSS, DOM question for you…

@SanFranFeb 13.2003

Hi, Dave.
I’m writing to you, but anyone interested in contributing would be welcome to add in.

I’m trying to figure out how to create three hidden DOM elements (DIVs), set the background color of each one to a different color, then later read those colors.

Basically, it’s sort of a rough ‘CSS enabled’ check. If the DIVs are created with, say, a red, white, and blue background, but are read back with different colors (or no color), then either CSS is disabled or unsupported, or the user has specified his own style sheet.

I know I’ll probably have to use the DOM heirarchy (we won’t worry about the older browsers) to do it, but I’m not sure how to get started.

Any ideas? Even if it doesn’t use DIVs, that’d be fine, just some way to check for the style sheet I specified as the one being used.

Thanks

to post a comment

JavaScript

11 Comments(s) _↴

@SanFranauthorFeb 13.2003 — #Hi, Dave.

I'm unsure about what you're asking. Let me explain our setup, maybe that will clear things up.

Our style sheet is imported:

<style type="text/css">



</style>

We have different <DIV>s set up in the style sheet (div.header, div.footer, div.content, etc.).

But I don't want to touch any of those <DIV>s to do the CSS check. I want to create three <DIV>s that are hidden, give them ID's:

(<div id="red" style="background-color : #FF0000; visibility : hidden;">

<div id="white" style="background-color : #FFFFFF; visibility : hidden;">

<div id="blue" style="background-color : #0000FF; visibility : hidden;">)

or something similar to that.

Then I want to figure out, (using the DOM heirarchy? I'm not sure how.) what the background colors of those <DIV>s are, and compare that to what we expect them to be (red, white, blue). If it's not the same, we can assume that CSS is either unsupported, disabled, or has been over-ridden by a user-specified style sheet. (At least, I hope that's how it works ?)

I'm not even sure if we can do this with <DIV>s. Perhaps we could do it with the BODY background color and the text color, or something like that? We need some element that, if CSS is either unsupported, disabled, or is over-ridden by a user style sheet, will change it's color (or some other attribute that will work).

I got some code that was supposed to check if CSS is supported and enabled, but when I disabled CSS, it didn't work like it was supposed to.

Here's the code:

<div id="checkcss" style="position:absolute;"></div>

<script language="javascript1.2" type="text/javascript">



</script>

Even with CSS disabled, it still forwarded me to yes.htm.

So, I came up with the idea of creating the three <DIV>s, but I'm not sure if even that will work.

So, I'm casting about for ideas as to how to do it, using either <DIV>s or any other element or technique you know about.

I hope this clears up what I'm looking for. Any ideas?

@SanFranauthorFeb 13.2003 — #So, I would use something like this?

<html>

<head>

<script language="javascript1.2" type="text/javascript">



</script>

</HEAD>

<BODY onload="checkCSS();">

<div id="white" style="background-color : #FFFFFF; visibility : hidden;">

<div id="red" style="background-color : #FF0000; visibility : hidden;">

<div id="blue" style="background-color : #0000FF; visibility : hidden;">

</BODY>

</HTML>

I'm pretty sure I've messed up the coding (if so, please point out my errors), but something like that?

@SanFranauthorFeb 14.2003 — #You know, I just thought of something...if we're specifying the <DIV> colors using in-line style declarations, and CSS is ENABLED, but the user is using a different style sheet. then these <DIV>s will still be the right color (won't they?). But, if we put them into the imported style sheet, (which won't be used because it's being over-ridden by the user-specified style sheet), that should work...I hope.

So, we'd HAVE to put the color specifications into the imported style sheet.

That way, if CSS isn't supported or is disabled, the <DIV>s won't have any color to begin with (is that the way it works? I'm not sure.), and if the style sheet is over-ridden, the colors won't be right.

Something like this, I think:

Style.css:
----------------------------------------------------------------------

div.red {

background-color : #FF0000;

}

div.white {

background-color : #FFFFFF;

}

div.blue {

background-color : #0000FF;

}
----------------------------------------------------------------------

@SanFranauthorFeb 14.2003 — #Yes, what we're trying to determine is if CSS is both supported and enabled, and not over-ridden...although I don't think the over-ridden part is very important, mostly the supported and enabled parts.

I also thought of something...if I'm thinking correctly, the 4.0 version browsers don't support imported stylesheets, do they?

If that's the case, then this would also function as a rough sort of browser version check, as well. The older browsers could be shunted off to the no.htm, which would urge them to upgrade their browsers.

@SanFranauthorFeb 14.2003 — #I just figured that out...I was playing around with the code, I made the <DIV>s visible, then set them up to be 50px tall, with one at 50px from the top, one at 100, and one at 150.

They showed up, alright, in red, white, and blue glory, but the Javascript alert boxes I'd set up with both:

document.getElementById("white").style.backgroundColor

and

document.all.white.style.backgroundColor

showed up as blank, meaning there was no value.

Why is that? Why does it not have a color value when the color is set from an imported CSS file? What should I use instead to read the colors?

Sorry if I'm not very good at Javascript...my knowledge doesn't extend much beyond cut-and-paste of already written code. ?

@SanFranauthorFeb 15.2003 — #So, it'd have to be something like:

Style.css:
----------------------------------------------------------------------

#red {

background-color : #FF0000;

}

#white {

background-color : #FFFFFF;

}

#blue {

background-color : #0000FF;

}
----------------------------------------------------------------------

<html>

<head>

<style type="text/css">



</style>

<script language="javascript1.2" type="text/javascript">



</script>

</HEAD>

<BODY onload="return checkCSS();">

<div id="white" style="visibility : hidden;">

<div id="red" style="visibility : hidden;">

<div id="blue" style="visibility : hidden;">

</BODY>

</HTML>

I probably messed up the CSS, but using #red, #white, and #blue should allow us to put the color attribute into the <DIV>'s style objects, allowing us to read it back with the document.getElementById("color").style.backgroundColor blurb. (Sorry if I'm not using the correct vernacular here...I'll pick up on the proper names to call different things as I learn more.)

Is my thinking correct on this?

@SanFranauthorFeb 16.2003 — #So what holds the color value for the <DIV> background when an external style sheet is used?

It's got to be held somewhere, otherwise the <DIV> wouldn't know what color to be.

I'll do some searching on the 'net, see what I can turn up.

@SanFranauthorFeb 16.2003 — #Could we do something like this:

if(document.styleSheets && document.styleSheets.length > 0 && document.styleSheets[0].rules[0].style.cssText = ''POSITION: relative; HEIGHT: 30px; BACKGROUND-COLOR: red') {

alert("Stylesheets are supported.");

} else {

alert("Stylesheets are not supported.");

}

I'm still unsure about the styleSheets[x] and rules[x] numbering scheme...how do they work? Does it start at 0 and increment up with each stylesheet used in the page? Does rules[x] start at 0 and increment up with each new rule you put in the stylesheet?

If a user has over-ridden the imported stylesheet, would that imported stylesheet still be styleSheets[0]? Or would the style sheet they specify take its place?

I was thinking that we could set up a style sheet with a specific structure, then read it back with the document.styleSheets[x].rules[x].style.cssText attribute, and if the user-specified style sheet over-rides the imported style sheet (or imported style sheets aren't supported or CSS is disabled), the value of that attribute would be all wrong, so we could assume that either CSS is unsupported, disabled, or over-ridden.

Would that work?

@SanFranauthorFeb 16.2003 — #Or, a more elegant way of doing it:

if(document.styleSheets && document.styleSheets.length > 0)

{

if (document.styleSheets[0].rules[0].style.cssText = ''POSITION: relative; HEIGHT: 30px; BACKGROUND-COLOR: red'){

alert("Correct stylesheet is in use.");

else

alert("Incorrect stylesheet is in use.");

}

else

alert("Stylesheets are not supported.");

}

Again, I'm pretty sure I messed up the coding (I'm still trying to figure out nesting if-then-else), but that'd give us the ability to determine if CSS is not only enabled or disabled, but whether or not the correct style sheet is in use.

@SanFranauthorFeb 16.2003 — #I just visited the W3C website, and looked up everything I could about CSS.

Apparently, they insist on using:

document.styleSheets[x].cssRules[x]

instead of:

document.styleSheets[x].rules[x].

Thus, using the first one allows it to work in IE 5.5+, NN6, Konquerer, Mozilla, whereas the second one only works on IE 5.5+ for Mac and Windows.

@SanFranauthorFeb 16.2003 — #Apparently, cssRules is the W3C DOM2 way of doing things.

I think you have to put IE into standards mode with a strict DOCTYPE declaration to get it. I'm not sure, though.

I'm still trying to get their example working in my testCSS page...can't figure out why theirs works, and mine doesn't.

Also in #JavaScript _↴

Random Code 0 error on ie (not Firefox)Insert entries and perform calculations.Passing Javascript function variable values to a Java Servlet

Success!

Help @SanFran spread the word by sharing this article on Twitter...

Tweet This

Dave, got a JS, CSS, DOM question for you…

11 Comments(s) _↴

Style.css:
----------------------------------------------------------------------

}
----------------------------------------------------------------------

Style.css:
----------------------------------------------------------------------

}
----------------------------------------------------------------------

Also in #JavaScript _↴

Success!

Social

Version

Dave, got a JS, CSS, DOM question for you…

11 Comments(s) ↴

Style.css: ----------------------------------------------------------------------

} ----------------------------------------------------------------------

Style.css: ----------------------------------------------------------------------

} ----------------------------------------------------------------------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Style.css:
----------------------------------------------------------------------

}
----------------------------------------------------------------------

Style.css:
----------------------------------------------------------------------

}
----------------------------------------------------------------------

Also in #JavaScript _↴