-1

how to involve a(some) element(s) within body section of HTML only if js is enabled or supported by browser. involve in the sense if the condition were met(js was enabled or supported), the element(s) would be displayed.

ps: I already know the use of "noscript" element.

diyar azhir
  • 53
  • 5

3 Answers3

1

A simple way to achieve that would be to hide by default your divs and display them with js.

document.querySelectorAll('.js-only').forEach(x => x.classList.add("show"))
.js-only {
  display: none;
}

.show {
  display: block;
}
<div class="js-only">
js is enabled
</div>
aloisdg
  • 22,270
  • 6
  • 85
  • 105
0

There is nothing you can do in just pure HTML/CSS. You will need to set the elements to be hidden by default with CSS. When JavaScript runs, you just add a class to the body which will show the elements with additional CSS Selectors.

document.body.classList.add("js-enabled");
.js-block, .js-inline {
  display: none;
}

.js-enabled .js-block {
  display: block;
}

.js-enabled .js-inline {
  display: inline;
}
<div class="js-block">Hello</div>

<p>Hello <span class="js-inline">World</span></p>
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

I would assume you are trying to see if you can display specific javascript elements or not. I would recommend just using the noscript tag but if you want to check it you can use a .no-js class on the body and create non javascript styles based on .no-js parent class to seperate them.

If javascript is disabled you will get all the non javascript styles you added, if there is JS support the .no-js class will be replaced giving you all the styles as usual.

example:

 document.body.randomClassName = document.body.randomClassName.replace("no-js","js");

But I would recommend just a redirect or alert that says that they should enable javascript if they ever want to browse a website to the fullest :)

Wanz
  • 137
  • 9