如何显示一个如果启用 Javascript 并且使用不同的如果不是？

Question

我正在使用一些 Javascript 在

中显示“照片淡入淡出旋转器”。 但是，如果未启用 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 文件在

上发挥了作用。 id="slideshow" 上的类设置尺寸、填充、边距、定位等。“hide-slideshow”css 文件在 #slideshow 上执行“display:none”，动画 gif 周围的“调整”类执行一些操作推动和拉动以将其放置在需要的位置（如果幻灯片未隐藏，这就是幻灯片所在的位置）。

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

虽然我的方法有效，但是是不是太笨拙了？ 有没有更好的方法来显示一个

如果启用了 JS，如果没有，则显示不同的

，以一种跨浏览器工作的方式通过验证？

谢谢！

Answer 1

尝试这样的事情。 它会优雅地降级，并且不需要 标记。

<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。 标签以 no-js CSS 类开头，并被 JS 中的 js 类替换。 这允许您只为依赖于 JS 存在的任何 CSS 规则添加适当的类前缀。 这更具语义性，因为它将表现性事物（应该在视觉上隐藏/显示的事物）与逻辑事物（无论页面是否运行 JS）分开。

---

回答原始问题的另一个选择是默认在 head 中添加指向 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();

Answer 2

只需为非 Javascript div 提供其自己的类，并将其样式定义放入样式表中即可。 将其包含在 块中。 您可以使用脚本动态插入另一个 div。

Answer 3

我的 元素属于 因此出现错误。

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