通过JavaScript定义CSS规则的最佳做法

Question

我正在加载仅在启用javascript时才需要的样式表。 更重要的是，如果禁用了JavaScript，则不得存在。 在加载任何JavaScript库之前，我会尽快（在头部）执行此操作。 （我要尽可能晚地加载所有脚本）。 从外部加载此样式表的代码很简单，如下所示：

var el = document.createElement('link');
el.setAttribute('href','/css/noscript.css');
el.setAttribute('rel','stylesheet');
el.setAttribute('type','text/css');
document.documentElement.firstChild.appendChild(el);

一切正常，但是我目前所有的CSS文件都是这样的：

.noscript {
    display: none;
}

这实际上并不能保证加载文件，因此我正在考虑仅在JavaScript中动态定义规则。 最佳做法是什么？ 。 快速浏览各种技术表明，它需要相当多的跨浏览器黑客。

PS请不要发布jQuery示例。 这必须在没有库的情况下完成。

Answer 1

嗯 如果节省几个字节的带宽不是问题，为什么不加载所有样式表，而是在JavaScript中的所有类前面加上特定的类：

body.hasjs a { color: blue }
body.hasjs div.contactform { width: xyz; }

没有那个阶级就为身体服务

<body>

并添加一个微型JavaScript，以添加类名称，例如：

body.onload = function() {
document.body.className = "hasjs"; 
}

为了更早地完成切换过程，您可以研究一种本机Javascript onDOMLoad解决方案。

通过JavaScript定义CSS规则的最佳做法

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-04-03 08:42:43

通过JavaScript定义CSS规则的最佳做法

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-04-03 08:42:43

解决方案1
1 已采纳 2010-04-03 08:42:43