jquery - 如果启用了 JS，有没有办法阻止样式表加载？

Question

我正在尝试设计一个 tumblr 主题。我发现它的样式非常有限。

我正在考虑使用这种东西为不同的页面加载不同的样式表:

var pathname = window.location.pathname;
if (pathname.indexOf("tagged/inspiration") != true){
<link rel='stylesheet' href='/style.css' /> 
}

现在的问题是，如果 js 被禁用，我就无法获取该文件。因此，我想我应该添加一个样式表，例如:

<link rel='stylesheet' href='no-js/css' />  

如果启用了js，是否可以隐藏它？

最重要的是我想做的事情有什么问题吗？

阅读网页设计博客的人禁用 javascript 的可能性有多大？

非常感谢

Answer 1

• HTML 是您的模型
• CSS 是您的 View
• JS 是你的 Controller

HTML 处理数据
CSS 处理样式
JS 处理交互

如果您需要样式仅应用于 JS，请在样式前添加 .js:

#foo { color: red; }

.js #foo { color: blue; } /* javascript enabled style */

并调用:

$('html').addClass('js');

Modernizr将为您处理这个问题，并添加大量其他对特征检测有用的类。

<小时/>

如果您觉得需要添加第二个样式表(一个用于 JS，一个用于非 JS)，可以通过多种不同的方法来完成。对于以下示例，我假设 link[rel="stylesheet"][type="text/css"]，但我懒得添加它们。

默认不带 JS 的添加剂:

<link href="no-js.css" />
<script type="text/javascript">
  document.write('<link href="js.css" />');
</script>

默认使用JS添加:

<link href="js.css" />
<noscript>
  <link href="no-js.css" />
</noscript>

更换

<link href="no-js.css" />
<script type="text/javascript">
  $('link').last().attr('href', 'js.css');
</script>