如何显示一个< div> if Javascript Enabled and a Different< div>如果不是？ [英] How to Show One <div> if Javascript Enabled and a Different <div> if It's Not?
问题描述
我使用一些Javascript在< div> 中显示photo fade rotator。如果JS没有启用，但是，我有一个动画的GIF我想显示。我实际上使用这个代码：
I'm using some Javascript to display a "photo fade rotator" in a <div>. If JS is not enabled, however, I've got an animated gif I want to display instead. I actually have it working with this code:
<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-slideshowcss文件在#slideshow上执行display：none，而在动画gif周围的adjust推动和拉动到它需要的地方（这是幻灯片将是如果它没有隐藏的地方。）
External JS files do their magic on the <div>. The classes on id="slideshow" set dimensions, padding, margin, positioning, etc. The "hide-slideshow" css file does a "display:none" on #slideshow, and the "adjust" class around the animated gif does some pushing and pulling to get it where it needs to be (which is where the slideshow would be if it wasn't hidden).
我在FF3测试了这个， IE7，IE8，Chrome和Safari（Win）。好消息是，它的工作方式像一个魅力。坏消息是，它没有通过W3C验证程序。我收到一个错误，说文档类型不允许元素链接这里。
I've tested this in FF3, IE7, IE8, Chrome, and Safari (Win). The good news is that it works like a charm. The bad news is that it doesn't pass the W3C validator. I get an error that says, "document type does not allow element "link" here".
即使我的方法工作，是太kludgey？是否有更好的方法来显示一个< div> 如果JS被启用，并且不同的< div> if
Even though my method works, is it too kludgey? Is there a better way to show one <div> if JS is enabled and a different <div> if it's not, in a way that works cross-browser and passes the validation?
谢谢！
推荐答案
尝试这样的。它优雅地降级，不需要< noscript /> 标记。
Try something like this. It degrades gracefully and doesn't require a <noscript /> tag.
<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类开头， c $ c> js 在JS中的类。这允许你只使用适当的类前缀任何依赖于JS的存在的任何CSS规则。这是更语义的，因为它将逻辑事物（不管页面是否正在运行JS）中的表示性东西（应该在视觉上隐藏/显示）分离。
To keep the example short, I used IDs. It would be more appropriate to use classes. Also, most decent starter frameworks such as HTML5 Boilerplate and Modernizr will do this using CSS classes on the HTML tag so you have a global way to hide/show content from your CSS file instead of using JS. The <html /> tag starts with a no-js CSS class and it gets replaced by a js class in JS. This allows you to just prefix any CSS rules that are dependent on the existence of JS with the appropriate class. This is more semantic since it separates presentational things (what should be visually hidden/shown) from logical things (whether the page is running JS or not).
另一个回答原始问题的选择是在头文件中添加默认的CSS文档的链接，并使用JavaScript删除它。 （免责声明）我没有测试过，但它也应该在所有浏览器上工作。
Another option for answering the original question is to add the link to the CSS document in the head by default and remove it using JavaScript. (DISCLAIMER) I haven't tested this, but it should also work across all browsers.
<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();
这篇关于如何显示一个< div> if Javascript Enabled and a Different< div>如果不是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
