Question

我正在开发一个基于Web的源代码编辑器。我正在考虑添加对主题的支持（语法高亮）。

//Default theme
.default-reserved-word
{
  background-color : red;
}

//Some other theme
.monokai-reserved-word
{
  background-color : green;
}

在编辑器中，每个语法可突出显示的单词都包含一个带有相应类的span标记：

....
<span class="default-reserved-word">def</span>method name
...

我要转换为（当用户点击“更改主题”按钮时）

....
<span class="monokai-reserved-word">def</span>method name
...

是否有一种简单的方法可以在不经过所有元素和修改类属性的情况下切换这些CSS规则？

（FWIW，我需要支持IE7 +，FF3.6 +）

Answer 1

我建议使用不同的方法，也许在更高的父容器上有一个主题类：

<div class="theme-default">

然后像这样使用CSS：

.theme-default .reserved-word {
    color: blue;
}

虽然这种方法并不完全符合您的要求，但它会简化更改样式的过程，首先您不必搜索大量的跨度，找到当前的theme-name +类'-reserved-word'（等）并对它们进行字符串替换。

Answer 2

将类名添加到根元素（<html>）并在使用输入时更改它。

.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }

然后更改

<html class="theme1">

到

<html class="theme2">

使用Javascript。

Answer 3

您可以使用jQuery：

var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');