如何直接更改 css class？

Question

是否可以使用 javascript 直接编辑 a.css 文件的内容？ （反过来，影响使用正在修改的 class 的元素的样式？）

我已经看到了这样一个问题的一些答案，但它们都处理 html 文档本身中 HTML 和 css 代码的动态创建，我不太想要......

例如，我有以下代码：

*{
    color:red;
}

这会使文档 go 中的所有文本变为红色。 如果我让客户选择下拉并将所有文本的颜色更改为他/她想要的任何颜色，那么最合乎逻辑的选择是我将 go 放入 .css 文件中，并在下编辑“颜色”的值通用选择器...

想法？

Answer 1

您可以在 append 到头部的单个样式元素中执行所有 css 操作 - 您放置在那里的任何内容都优先于其他样式表，并且您的用户可以通过删除他们的更改来“回溯”到页面默认值，一次一个或一次全部。

使用 document.styleSheets 集合中的最后一张表（新样式元素的规则），您可以 append 新规则、删除旧规则或编辑现有规则。

您可以将一段文本保存在您的服务器上或每个用户的本地存储中，可能会在他们下次访问时添加到文档中。

Answer 2

我解决这个问题的方法是将首选项保存在配置文件中，当页面加载时，使用页面生成器或使用 Javascript 动态应用首选项。 使用页面生成器会使事情变得更顺畅，因为 CSS 代码在加载时将在页面本身中。

Answer 3

您不能将 CSS 与 JavaScript 添加到 CSS，但您可以将 styles 添加到一个元素或一系列元素。

如果您想让您的客户控制 styles，您可以使用 PHP 创建它们。 您基本上只需将变量用作值并将它们链接到 CSS 链接元素中的 PHP 文件。

<link rel="stylesheet" type="text/css" href="/path/to/css.php" />

Answer 4

这看起来很有趣……

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

Answer 5

简而言之，可以使用 javascript 来更改 css。 您可以使用 jQuery，这里有一些示例： http://api.jquery.com/css/ 。

Answer 6

你可以做...

var elements = document.getElementsByTagName('body')[0].getElementsByTagName('*');

for (var i = 0, length = elements.length; i < length; i++) {
    elements[i].style.color = '#f00';
}

Answer 7

我假设您要更改服务器上的 original.css 文件，以便为以下请求维护样式更改。 但是 JavaScript 在浏览器中执行，.css 文件在服务器上。 所以简短的回答是，不，它不能完成。 反正不是。

如果你真的想，你可以创建一些 JavaScript 向服务器发出 AJAX 请求，然后编写一些服务器端代码来接收请求并相应地修改 .css 文件。 这会带来更多麻烦，而且可能会产生有趣的安全漏洞，所以我不推荐它。

Answer 8

动态加载 CSS 文件，使用纯 JavaScript

---

var filename = "matrix.css";
var css      = document.createElement("link");

css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", filename);
document.getElementsByTagName("head")[0].appendChild(css);