在JavaScript中快速重新绘制unicode符号数组

我想用相同的CSS类更改许多符号的背景/前景颜色。现在我正在使用jQuery-like

$（'back_COLORED'）.css（'background-color'，'00FF00'）

，但是当有许多这样的类（>900）的元素时，这种方法会很慢

这似乎是因为jQuery本身不更改CSS规则，而是逐个查找所有元素并对其应用内联样式。至少，这是我在督察身上看到的。因此，问题是：

• 如何更改CSS规则本身
• 会快得多吗
• 我可以让它跨浏览器（IE6不算在内）吗

UPD：我正在尝试制作某种颜色方案编辑器。消息来源位于。不要介意PHP，编辑器完全是客户端的（只有一些从网络中获取的库）

---

UPD2：尝试了画布方法，但仍然很慢。Canvas branch位于。

根据您使用的浏览器，有不同的方式。这是

有些库提供抽象层，例如

由于您没有使用JS/DOM循环遍历所有元素，因此应该会有显著的性能提升

另一种方法是预定义样式：

body.foo .myElements { … }

---

然后编辑

document.body.className

我认为更好的解决方案是编写一个更具体的CSS规则（可以覆盖正常的颜色），只需更改一个元素的CSS类即可激活该规则

例如，如果您有以下结构标记：

<div id="container">
    <span class="colored">Test 1</span>
    <span class="colored">Test 2</span>
</div>

然后在jquery中将.newcolor类添加到容器div：-

$('#container').addClass('.newcolor');

---

当您这样做时，第二个CSS规则将覆盖第一个，因为它更为具体。

如果您可以按id选择父div，那么您是否可以按其中的标记选择？或者，在父元素内部是否存在应改变颜色而不应改变颜色的相同类型的元素

---

如果你能对这里的建筑有所了解，那就太好了。900多个物体似乎很多。。。也许可以使用完全不同的方法？画布，SVG？

我会坚持尝试更改CSS属性，而不是解析DOM。
这里是关于CSS引擎与DOM+JS的对比，胜利者是显而易见的

碰巧我刚刚上传了一个用Javascript替换CSS的小库：

---

这可能有些过分，但您可以在jstyle.js的源代码中找到更新跨浏览器页面CSS属性所需的所有代码。

覆盖类定义的最跨浏览器友好方式是编写新规则并将其添加到文档中最后一个样式表的末尾。您可以编辑现有的样式规则，但即使是最近的一些浏览器也会使编辑变得困难

function newRule(selector, csstext){
 var SS= document.styleSheets, S= SS[SS.length-1];
 // this example assumes at least one style or link element
 if(S.rules){
  S.addRule(selector,csstext,S.rules.length);
 }
 else if(S.cssRules){
  S.insertRule(selector+'{'+csstext+'}'),S.cssRules.length)
 }
}

newRule('.someclass','background-color:#0f0');

您可以添加任意多个“property:value；”根据需要在csstext中输入位。 记住在类名前加“.”，在id前加“#”， css必须作为样式规则编写（使用连字符，而不是大小写）

当然，它不会覆盖内联样式，而且对于较小的局部更改来说，这是过分的。 它还可以使页面的重画比一次更改一个元素更明显，

---

但这可能正是您在此处需要的。

在更改项目之前，请尝试隐藏要更改的项目，进行更改，然后再次显示它们。在最小化视口中的重绘事件时，这是提高速度的常见做法。在这种情况下，当您只设置一个css属性时，它可能没有什么好处，但我认为值得一试

尝试：

或

---

将css代码注入

样式
标记：

var style = $('style').attr({
    type:"text/css",
    media:"screen",
    id:'changeStyle'
}).html('.tempClass { color:red } .tempClass p { background:blue }').prependTo('body');

使用颜色选择器每次更改颜色时，您只需重写
#changeStyle
标记内的html

不知道它是否有效（未测试），但您应该试一试。
这是使用css规则的jQuery插件：

不确定它的性能，但值得一试。
我正在使用颜色选择器更改CSS中的颜色。转换类不会有帮助。我想我曾经遵循过怪癖模式文档，发现这项技术使我正在测试的IE6版本崩溃。当然不是坏事；）但我只是想知道是否有其他人看到了这一点？@Kuroki-然后使用第一种技术：）classes选项是一个简单的解决方案，如果您有少量不同的情况，它可以更好地保持关注点的分离。奇怪。YUI方法是可行的，但也很慢（在Chrome中测试）。我需要测试其他浏览器。我无法直接回答您的CSS问题，但仅供参考，按id或标记选择比按CSS类名选择要快得多，所以这可能是您可以探索的提高性能的途径。我尝试通过按id选择父div来限制搜索。这有点帮助，但速度仍然很低。我不知道如何使用不同的ID，甚至标签来代替类。新的css规则是由JavaScript通过从颜色选择器获取RGB值创建的。嗯，我想你可能很难找到一个完整的JavaScript解决方案。如果这是由于某种用户偏好设置的原因，那么您最好允许用户在更小的页面上选择颜色，然后使用CGI/asp/Anwhere来基于此生成自定义css文件，而不是通过javascript更改页面的颜色。这是一种颜色方案编辑器。来源是在。有问题的文件是index.html和css/style.cssI，我不擅长canvas和SVG。我想我可以在画布上做同样的事情（显示Unicode字符的矩阵），但它会更快吗？我自己还没有使用过画布，但是当人们认为Javascript很慢时，通常是DOM慢，而不是JS慢。Canvas消除了DOM，所以我猜是的。当然，canvas的缺点是浏览器兼容性。毕竟是HTML5。。。看看一些简单的画布示例。我需要非常基本的东西-符号数组。我认为这一水平得到了广泛的支持
$('back_COLORED').hide();
$('back_COLORED').css('background-color', '#00FF00');
$('back_COLORED').show();

$('back_COLORED').hide().css('background-color', '#00FF00').show();

var style = $('style').attr({
    type:"text/css",
    media:"screen",
    id:'changeStyle'
}).html('.tempClass { color:red } .tempClass p { background:blue }').prependTo('body');