更新：

Question

我读了一篇很棒的文章：http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

我引用它的作者：

“为了好玩，我想，”如果不是操纵每个DOM节点并改变事物，我们只需要使用样式表怎么办？“那么速度会有提升吗？我的意思是，上面的基准测试方法对于每天都很快使用，但是如果我在页面上有10,000个节点我想要显示和隐藏怎么办呢？只要选择它们就会很慢。但是，如果我可以操作样式表，我可以避免整个开销。让我告诉你方式充满了危险。

当然，在操作样式表时存在跨浏览器问题，因为jQuery不会为您抽象它们。首先，我试着看看我是否可以使用jQuery将带有css类的样式标记作为字符串附加，但是跨浏览器会得到不一致的结果。然后我尝试使用JavaScript创建样式表节点和类，但是有不同的API，它最终太慢而无法证明。最后，为了尝试以编程方式执行此操作，我最终只是在文档的头部编写了一个带有类的样式标记。以编程方式创建样式表太慢了，但如果它已经存在，那么给它一个ID并使用它的disabled属性是微不足道的。

HTML：

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

然后在javascript ...

JavaScript的：

$('#special_hide').attr('disabled, 'true');

和BAM，您只是使用“special_hide”类显示了所有元素。要再次隐藏它们，只需...

JavaScript的：

$('#special_hide').attr('disabled', 'false');

现在他们都隐藏了。所有浏览器的总javascript处理时间为0-1ms。你正在做的唯一的javascript是改变一个属性。 “

**我的问题是：如何创建一个'special_show'类，将div添加到该类，然后启用该类显示它们？

像

这样的东西

<style id="special_show">.special_show { display: default; }</style>

**

Answer 1

我会做出一般性回答，没有字符限制：）

所以，你想要操纵DOM元素的CSS样式（例如div等）而不循环遍历元素（如$(".special_style").each()）来应用样式，因为它可以消耗大量资源，规则所捕获的元素越多。

你不能使用removeClass / addClass组合，因为它是DOM操作，你需要使用前一个循环。

这有already been answered，解决方法是使用insertRule和addRule方法。请阅读其他答案，这个主题是重复的。

更新：

1 This fiddle展示了如何设法为您的网页添加动态CSS！嗯，这不是那么好，因为它不是外化的，但它可以做你想要实现的东西！

$("#special_hide").append(".special_hide { display: none; }");

2 您可以加载其他CSS文件$("head").append("<link rel='stylesheet' href='path/to/style.css' type='text/css' />");

除此之外，我不能告诉你哪一个是最好的，有些人会认为通过添加样式表修改头部可能错误，其他人会告诉你内联css是错误 ...通过阅读像w3c这样的文档来决定它的想法！

禁用样式表以提高显示/隐藏div的速度

1 个答案:

更新：