Question

我有一个应用程序，我有一个jQuery颜色选择器。我将获得用户选择颜色的值，然后我将它放入会话变量。现在我希望根据所选的颜色修改外部样式表的内容。

示例：

在外部“style.css”中我喜欢.topbox{ background: #dedede; }

现在，在用户选择颜色选择器之后，应该覆盖背景值

Answer 1

您无法永久修改外部CSS，但您可以使用jQuery轻松更改页面上元素的CSS。

var colour = "#cecece"; // returned from colour picker
$("#element").css("background-color",colour);

编辑：啊，我的坏。没有意识到你在做服务器端。我不建议尝试修改文件本身。相反，我建议有一个临时的东西（存储在数据库中的值或具有良好结构且可以更新的XML文件），然后根据这些值重新创建CSS文件。

您可以通过对服务器执行AJAX调用来更改颜色选择器时自动保存值。无论什么事件都会被你的颜色选择器调用：

$.ajax({
   url:'/update/', 
   data: {'name' : 'background-color', 'value' : colourFromPicker },
   success: function(data){ console.log(data); }
});

当然 - 所有这些都取决于您的服务器端代码，但它确实提供了可以执行的操作的示例。

Answer 2

如果您想为单个用户（如主题）制定永久性更改，最好为每个用户创建一个数据库条目，并将选择的详细信息保存在数据库中。通过这种方式，您可以为每个用户创建一个主题，您可以使用该主题生成个性化体验而无需编写核心文件。

从javascript修改外部样式表

2 个答案: