如果启用了 Javascript，如何显示一个 <div>，如果没有，如何显示不同的 <div>？答案

【问题标题】：How to Show One <div> if Javascript Enabled and a Different <div> if It's Not?如果启用了 Javascript，如何显示一个 <div>，如果没有，如何显示不同的 <div>？
【发布时间】：2010-11-01 01:59:59
【问题描述】：

我正在使用一些 Javascript 在<div> 中显示“照片淡化旋转器”。但是，如果未启用 JS，我有一个想要显示的动画 gif。我实际上已经使用此代码：

<div id="slideshow" class="show pics float-left">
    <img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>

<noscript>
    <link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
    <p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>

外部 JS 文件在 <div> 上发挥作用。 id="slideshow" 上的类设置尺寸、填充、边距、定位等。“hide-slideshow”css 文件在#slideshow 上执行“display:none”，动画 gif 周围的“adjust”类执行一些推拉把它放到它需要的地方（如果它没有被隐藏，那就是幻灯片的地方）。

我已经在 FF3、IE7、IE8、Chrome 和 Safari (Win) 中对此进行了测试。好消息是它就像一个魅力。坏消息是它没有通过 W3C 验证器。我收到一条错误消息，提示“文档类型不允许此处的元素“链接””。

即使我的方法有效，是不是太笨拙了？如果启用了 JS，是否有更好的方法显示一个 <div>，如果没有，则显示另一个 <div>，以跨浏览器工作并通过验证？

谢谢！

【问题讨论】：

标签： javascript css hide show

【解决方案1】：

试试这样的。它优雅地降级并且不需要<noscript /> 标签。

<div id="hasJavaScript" style="display: none">
    <!-- Contents hidden when JavaScript is disabled -->
</div>

<div id="noscript">
    <!-- Contents shown only when JavaScript is disabled -->
</div>

<script type="text/javascript">

    document.getElementById('hasJavaScript').style.display = 'block';
    document.getElementById('noscript').style.display = 'none';

</script>

为使示例简短，我使用了 ID。使用类会更合适。此外，大多数像样的入门框架，如HTML5 Boilerplate 和Modernizr 都将使用 HTML 标记上的 CSS 类来执行此操作，因此您可以使用全局方法来隐藏/显示 CSS 文件中的内容，而不是使用 JS。 <html /> 标签以 no-js CSS 类开头，在 JS 中被 js 类取代。这允许您只为依赖于 JS 存在的任何 CSS 规则添加适当的类的前缀。这更具语义性，因为它将表现性事物（应该在视觉上隐藏/显示的内容）与逻辑事物（页面是否运行 JS）分开。

回答原始问题的另一个选项是默认在头部添加指向 CSS 文档的链接，然后使用 JavaScript 将其删除。（免责声明）我没有对此进行测试，但它应该也适用于所有浏览器。

<script type="text/javascript">
    var cssDocs = document.getElementsByTagName('LINK');
    for (var i = 0; i < cssDocs.length; i++) {
        var css = cssDocs[i];
        if (css.href === 'css/hide-slideshow.css') {
            var parent = css.parentNode;
            parent.removeChild(css);
            break;
        }
    }
</script>

如果您使用jQuery，也可以缩短此脚本。

$("link[href='css/hide-slideshow.css']").remove();

【讨论】：

谢谢，丹。我喜欢你第一个建议的优雅。我会在早上试试 - 我现在太困了，无法思考......
第一个选项需要如下所示： document.getElementById('hasJavaScript').style.display = "block";注意额外的 .style。
@ajbeaven 哎呀。很惊讶我错过了。 *固定的。谢谢。

【解决方案2】：

我有 <link...> 元素属于 <head...> 因此错误。

简单的解决方案是将“no javascript” css 放入主 css 文件中，该文件在 <head...> 中加载

【讨论】：

【解决方案3】：

只需给无Javascript div 自己的类，并将其样式定义放在您的样式表中。将其包含在 <noscript> 块中。您可以在脚本中动态插入另一个 div。

【讨论】：