我正在使用一些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>如果它不是,以一种跨浏览器工作并通过验证的方式？
谢谢!
Dan*_*ert 24
尝试这样的事情.它优雅地降级,不需要<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-jsCSS类,它被用替代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();
| 归档时间： |
|
| 查看次数： |
13915 次 |
| 最近记录： |