6

我正在使用一些 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 验证器。我收到一条错误消息，提示“文档类型不允许此处的元素“链接””。

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

谢谢！

4

3 回答 3

25

尝试这样的事情。它优雅地降级并且不需要<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 />标签以CSS 类开头，然后no-js被jsJS 中的类替换。这允许您只为依赖于 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();
于 2009-06-08T02:04:55.573 回答
4

只需为 no-Javascriptdiv提供自己的类并将其样式定义放在您的样式表中。将其包含在一个<noscript>块中。您可以使用脚本动态插入另一个div。

于 2009-06-08T01:57:50.597 回答
0

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

简单的解决方案是将“无 javascript”css 放入加载到<head...>

于 2009-06-08T01:59:39.127 回答