发表新帖
发表新帖

How to hide parts of HTML when JavaScript is disabled?

后端 未结
关注
8 2034
伪装坚强ぢ
伪装坚强ぢ 2021-02-07 06:10

I\'m trying to accommodate users without JavaScript. (By the way, is it worth the effort nowadays?)

In one HTML file I\'d like part of it execute if scripts are on

相关标签:
8条回答
  • 渐次进展
    2021-02-07 06:32

    The jQuery way:

    $(document).ready(function(){
    $("body").removeClass("noJS");
});

    Pseudo CSS

    body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

    HTML

    <body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>
    0 讨论(0)
  • 灰色年华
    2021-02-07 06:33

    Default the bits you want to hide as styled as display:none and switch them on with jQuery or JavaScript.

    0 讨论(0)
  • 情书的邮戳
    2021-02-07 06:33

    By the way, is it worth the effort nowadays?

    Yes, it's worth worrying about accessibility. You should use progressive enhancement where possible, i.e. make a basic version that works without scripting and then add the scripting functionality on top of it.

    A simple example would be a pop-up link. You could make one like this:

    <a href="javascript:window.open('http://example.com/');">link</a>

    However, this link wouldn't work if someone, say, middle-clicked or tried to bookmark it, or had scripts disabled etc. Instead, you could do the same thing like this:

    <a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

    It's still not perfect, because you should separate the behavior and structure layers and avoid inline event handlers, but it's better, because it's more accessible and doesn't require scripting.

    0 讨论(0)
  • 我寻月下人不归
    2021-02-07 06:35

    You could edit the HTML of the page with Javascript 

    document.querySelector('div').style.display = 'block';
    div {
  display: none;
}
    <div>Div</div>
    Try it with JS and the without JS.

    0 讨论(0)
  • 不要未来只要你来
    2021-02-07 06:36

    This makes the content inside the div inaccessible without JS but with JS it adds the content into the div with JS and you can also do that with the CSS. To change the CSS add:

    document.querySelector('style').innerHTML = 'div{}';


    document.querySelector('div, #div').innerHTML = 'Div';
    <div id='div'></div>

    0 讨论(0)
  • 清酒与你
    2021-02-07 06:38

    If the content only makes sense when JavaScript is enabled, then it should be inserted by the JavaScript code directly rather than being rendered. This could either be done by simply having HTML templates as strings within your JavaScript code, or using Ajax if the HTML is more complex.

    As mentioned by Reinis I. this is the idea of Progressive Enhancement.

    Regarding the CSS techniques of using a class name on the body tag, I would advise doing this the other way around and adding a 'js-enabled' class to the body tag with JavaScript that would alter the page CSS. This fits in with my above comment about keeping all initial HTML 'non-JavaScript friendly'.

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