禁用JavaScript时的Css后备

时间:2012-05-25 17:45:21

标签: javascript jquery css jquery-mobile fallback

使用jQuery Mobile,我使用此代码段来调用库...

<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
if(typeof jQuery === 'undefined') 
{
    document.write(unescape('%3Cscript src="js/jquery-1.6.4.min.js"%3E%3C/script%3E'));
    document.write(unescape('%3Cscript src="jqm/jquery.mobile-1.1.0.min.js"%3E%3C/script%3E'));     
    document.write(unescape('%3Clink rel="stylesheet" href="jqm/jquery.mobile-1.1.0.min.css"%3E%3C/script%3E'));
    document.write(unescape('%3Clink rel="stylesheet" href="jqm/jquery.mobile.structure-1.1.0.min.css"%3E%3C/script%3E'));
}
else
{
    document.write(unescape('%3Cscript src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"%3E%3C/script%3E'));
    document.write(unescape('%3Clink rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"%3E%3C/script%3E'));
    document.write(unescape('%3Clink rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css"%3E%3C/script%3E'));
}
</script>

但如果禁用JavaScript,如何调用样式表?

如果我使用(我有点傻!)......

<noscript>
<link rel="stylesheet" href="jqm/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile.structure-1.1.0.min.css" />
</noscript>

...我的页面是空白的。

感谢您的帮助。

文森特

1 个答案:

答案 0 :(得分:2)

Modernizr方法是使用JavaScript在加载时向HTML标记添加一个名为“js”的类,并删除一个名为“no-js”的类,在这种情况下,您自己添加。

现在,您只能将一些CSS样式添加到.js的后代,而将其他CSS样式添加到.no-js的后代,根据您的喜好自定义其中一个。