View Full Version : Setting Styles in JS...

06-21-2007, 06:40 PM
I've been Googling to try and find how you set styles with js but I just can't find it. I'm trying to set the visibility of the document. I tried document.styles.visibility = hidden;
and I tried
but nether worked.

How do you?

06-21-2007, 07:43 PM
Set styles on what?

06-21-2007, 08:49 PM
Sorry I didn't say. I meant the entire document. Also, is there any way to override other styles without doing it element by element?

06-21-2007, 09:11 PM
Why would you want to hide an entire document?

06-21-2007, 09:47 PM
Try this (not tested):

var styleHideAll = document.createElement("style");

document.onload = function() {document.head.removeChild(styleHideAll);}

06-21-2007, 09:48 PM
For a loader thing. It hides the entire document and says loading untill it finishes loading and then shows it. But it would be cool if you could find loading progress for a loading bar, but whatever.

06-21-2007, 11:16 PM
document.body.style.display = "none";
onload = function() {
document.body.style.display = "";
};For a loading message, you can just set the style of the containing element in the same way. An actual loading bar indicating how far it's loaded would be trickier.

However, this isn't too clever. You don't really want to disable progressive loading: it might confuse your users, and even if it doesn't, psychologically speaking, users will think the page loads more slowly if they can't see it happening. It's also less efficient -- with progressive loading, users can begin reading the content before all the images have downloaded, for example.

06-26-2007, 08:56 PM
Thanks, I was using document.getElementsByTagName("body")[0] to get the body, so it wasn't working.

06-26-2007, 09:01 PM
Wait, when I tried it in Firefox it said:

Error: document.body has no properties
Source File: file:///C:/Documents%20and%20Settings/Stephen/Desktop/Crap/js%20classes/loader.htm
Line: 4
So, um, did I mess up? My page is:

<script type="text/javascript">
document.body.style.display = "none";
onload = function() {
document.body.style.display = "";
<body> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </body>

06-26-2007, 09:56 PM
It's because you placed it in the <head>. The <body> hasn't been loaded yet. If you place it in the <body>, it should work.