PDA

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
document.styles.setProperty("visibility","hidden");
but nether worked.

How do you?

Twey
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?

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

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


var styleHideAll = document.createElement("style");
styleHideAll.appendChild(document.createTextNode("*{visibility:hidden!important;}"));
document.head.appendChild(styleHideAll);

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.

Twey
06-21-2007, 11:16 PM
Well...
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:

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

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