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

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

javascript jquery html css

Javascript 禁用样式表以提高显示/隐藏div的速度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我读了一篇很棒的文章：我引用作者的话： “为了好玩，我想，”如果我们不用操纵每个DOM节点和更改东西，而只是使用样式表呢？“那里会有速度提升吗？我的意思是，上面的基准方法对于日常使用来说非常快速，但是如果我想显示和隐藏的页面上有10000个节点呢？仅仅选择它们都会很慢。但是，如果我可以操纵样式表，我就可以避免整个开销。让我告诉你，这条路充满了危险当然，在操作样式表时存在跨浏览器问题，因为jQuery不会为您将它们抽象出来。首先，我尝试查看是否可以使用jQuery将css类的样式标记作为字符串

我读了一篇很棒的文章：

我引用作者的话：

“为了好玩，我想，”如果我们不用操纵每个DOM节点和更改东西，而只是使用样式表呢？“那里会有速度提升吗？我的意思是，上面的基准方法对于日常使用来说非常快速，但是如果我想显示和隐藏的页面上有10000个节点呢？仅仅选择它们都会很慢。但是，如果我可以操纵样式表，我就可以避免整个开销。让我告诉你，这条路充满了危险

当然，在操作样式表时存在跨浏览器问题，因为jQuery不会为您将它们抽象出来。首先，我尝试查看是否可以使用jQuery将css类的样式标记作为字符串附加，但在不同浏览器中得到了不一致的结果。然后，我尝试使用JavaScript创建样式表节点和类，但有不同的API，结果速度太慢，无法进行验证。最后，我放弃了以编程方式实现这一点的尝试，结果只是编写了一个样式标记，在文档的开头有一个类。以编程方式创建样式表的速度太慢，但是如果它已经存在，那么给它一个ID并使用它的disabled属性就很简单了

HTML:

BAM，你只是用一个“特殊隐藏”类来显示你所有的元素。要想把它们都藏起来，就要

JavaScript:

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

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

它们现在都隐藏起来了。所有浏览器的javascript处理总时间为0-1ms。您正在执行的唯一javascript是更改属性。"

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

差不多

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

.special_show{display:default；}

我将给出一个一般性的回答，没有字符限制：）

因此，您希望操纵DOM元素（如div等）的CSS样式，而不在元素之间循环（如

$（“.special_Style”）。each（）

）来应用样式，因为规则捕获的元素越多，它会消耗大量资源

不能使用

removeClass

addClass

组合，因为它是DOM操作，需要使用上一个循环

这已经发生了，解决方案是使用和方法。请阅读另一个答案，这个主题是重复的

更新： 1展示了如何将动态CSS添加到页面中！好吧，它不是那么好，因为它不是外部化的，但它可以做你想要实现的事情

$（“#特殊_隐藏”）.append（“.special_隐藏{display:none；}”）；

2您可以加载不同的CSS文件

$（“head”）。追加（“”；

除此之外，我不能告诉你哪一个是最好的，有些人会争辩说通过添加样式表来修改头部可能是错误的，其他人会告诉你内联css是错误的……只要通过阅读像w3c这样的文档来下定决心！

我将给出一个一般性的答案，没有字符限制：）