发表新帖
发表新帖

What is the purpose of the HTML “no-js” class?

后端 未结
关注
7 1159
误落风尘
误落风尘 2020-11-27 08:59

I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-js class added onto the

相关标签:
7条回答
  • 暖寄归人
    2020-11-27 09:21

    The no-js class gets removed by a javascript script, so you can modify/display/hide things using css if js is disabled.

    0 讨论(0)
  • 难免孤独
    2020-11-27 09:21

    The no-js class is used to style a webpage, dependent on whether the user has JS disabled or enabled in the browser.

    As per the Modernizr docs:

    no-js

    By default, Modernizr will rewrite <html class="no-js"> to <html class="js">. This lets hide certain elements that should only be exposed in environments that execute JavaScript. If you want to disable this change, you can set enableJSClass to false in your config.

    0 讨论(0)
  • 栀梦
    2020-11-27 09:22

    This is not only applicable in Modernizer. I see some site implement like below to check whether it has javascript support or not.

    <body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

    If javascript support is there, then it will remove no-js class. Otherwise no-js will remain in the body tag. Then they control the styles in the css when no javascript support.

    .no-js .some-class-name {

}
    0 讨论(0)
  • 眼角桃花
    2020-11-27 09:26

    When Modernizr runs, it removes the "no-js" class and replaces it with "js". This is a way to apply different CSS rules depending on whether or not Javascript support is enabled.

    See Modernizer's source code.

    0 讨论(0)
  • 北荒
    2020-11-27 09:30

    Modernizr.js will remove the no-js class.

    This allows you to make CSS rules for .no-js something to apply them only if Javascript is disabled.

    0 讨论(0)
  • 逝去的感伤
    2020-11-27 09:40

    Look at the source code in Modernizer, this section:

    // Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

    So basically it search for classPrefix + no-js class and replace it with classPrefix + js.

    And the use of that, is styling differently if JavaScript not running in the browser.

    0 讨论(0)
 看不清?
提交回复
热议问题