No JS detection utility

Include this snippet directly in your <head> along with adding class .vf-no-js to your <html> (<html class="vf-no-js">).

github location npm version

Usage

If JS is enabled in a user's browser, .vf-no-js will be swapped to .vf-js.

This method allows using CSS to conditionally show content.

.vf-no-js .js-is-not-on {
  /* SHOW block that says you need js to use this site */
}
.vf-js .js-is-not-on {
  /* HIDE block that says you need js to use this site */
}

Variants

HTML 
<script>
  // Detect if JS is on and swap vf-no-js for vf-js on the html element
  (function(H) {
    H.className = H.className.replace(/\bvf-no-js\b/, 'vf-js')
  })(document.documentElement);
</script>

Examples

Changelog

Changelog

1.0.1

  • Classify as a utility component

1.0.0

  • Initial stable release

Assets


File system location: components/vf-no-js

Find an issue on this page? Propose a change or discuss it.

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.