3

My webpage contains a DIV. If Javascript is enabled, I want the DIV to be invisible (display: none;) when the page loads. If JS is disabled, I want it to be visible (display: block;).

I can do:

document.write('<div style="display:none;">...</div>');

or

document.getElementById('foo').style.display = 'none';

With the first code there won't be a DIV if JS is disabled. With the second, the DIV will be visible when the page loads and disappear when the JS is executed.

I'm too stupid to solve this.

Can I put JavaScript inside the <div>-tag to write only the style? Certainly not like this:

<div <script>document.write('style="display:none;"');</script>>

Maybe something like:

<div onLoad="document.write('<div style="display:none;">...</div>');">

Does someone have an idea?

Improve this question

2 Answers 2

Reset to default
2

One problem with displaying an element unless JS hides it is that, even with JS on, the element is likely to display until the JS kicks in. So it's often better to have some JS at the top of the file that adds a class to the root element straight away, to get in before the CSS loads. Here's a simple example (in my noob JS):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
(function() {
    var root = document.querySelector('html');
    root.className = "js";
}());
</script>
<style media="all">

div {width: 500px; height: 200px; background: blue;}
.js div {display: none;}

</style>
</head>
<body>

<div></div>

</body>
</html>

This is much better than using oldfashioned <noscript> and document.write() etc.

EDIT: I should just note that an easier way to target the html element is with document.documentElement. Thus, the code above could be written as—

<script>
(function() {
    document.documentElement.className = "js";
}());
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This looks like what I want. I tried to put the JS script inside the style tags, and that does not work. Could you explain (in one sentence or two), what your code does? How and when is the function called, and what does it do?
If JS is available, the script inside the <script> tags at the top of the page adds a class to the html element, which is then used to hide the div via .js div {}. So just put the script in the code above (along with the script tags) in the same position on your pages, and then use the .js selector in your CSS to hide the div, as above.
Perfect, thank you. I changed .js div { to .js #someid {, so not all DIVs are hidden ;-)
Yes, selecting div was just for the purposes of a simple example. Glad it helped. :-)
0

Why don't you just put the <div> in a <noscript>?

<noscript><div style="display:none;">...</div></noscript>

Now you don't even have to use Javascript to deal with it.

Improve this answer

1 Comment

Because then I don't have an invisible DIV, if JS is enabled, that I can turn visible through JS!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.