Jquery 和 CSS 切换 - 这可能吗？答案

【问题标题】：Jquery and CSS switching - is this possible?Jquery 和 CSS 切换 - 这可能吗？
【发布时间】：2010-03-28 19:08:24
【问题描述】：

我使用 PHP 构建了一个 css 文件，它允许我轻松自定义许多元素的颜色。我是否可以“重建”样式表并使用 Jquery 将其应用于 DOM 中的页面？

例如。

<?php
if (isset($_POST['mycolor'])){
$myColor = $_POST['mycolor'];
} else {
$myColor = "blue";
}
?>

<style type='text/css'>
    .style1{
    color:<?php $myColor;?>;
    }
</style>

现在在我的页面上，我有一个链接，您可以单击“将颜色更改为红色”，当您单击“红色”时，它会对我的 php 脚本执行 $.post，该脚本会重建包含 .style1 的 css - 并允许页面来更改样式表。

我没有对此进行测试，但它甚至可以工作吗？如果我在发布到 dom 后将新样式表回显出来......它甚至会应用于页面吗？

【问题讨论】：

看来它会起作用的...... muwhahaha
你需要改变到首先 -

标签： php jquery css

【解决方案1】：

如果你的整个样式表是 php 生成的，你可以这样做：

function newCSS(params){
  $("link[href*=myStyles.php]:last").after('<link href="myStyles.php?'+ params +'" type="text/css" rel="Stylesheet" />');
  $("link[href*=myStyles.php]:first").remove();
}

这会将头部中的链接替换为新链接...新样式将在加载后生效。

【讨论】：

我遇到的问题是，在切换之间，页面上不再存在旧的 css。有没有办法在加载新css之前不显示它？
@Joe - 像这样包裹$("link[href*=myStyles.php]:first").remove();：if($("link[href*=myStyles.php]").length > 2) { $("link[href*=myStyles.php]:first").remove(); } 这会留下一个被覆盖的样式表，所以你永远不会没有。

【解决方案2】：

您可以使用css 函数在元素上设置不同的css属性：

$('.style1').css('color', 'red');

【讨论】：

显然，但我这样做是因为您似乎无法纯粹根据元素当前的“颜色”值来选择和更新元素。因此，我将重建整个 css 并将其重新应用于页面。它与 css 切换器的概念相同，只是它允许我编辑所有颜色而无需预设 css 文件。

【解决方案3】：

我建议您将动态 css 创建为 php 文件。更多信息在这里：http://www.barelyfitz.com/projects/csscolor/

编辑： 这是使用 Nick 提供的选择器的改进解决方案：

$("link[href*=myStyles.php]").attr('href','myStyles.php');

【讨论】：

【解决方案4】：

我不知道你是否听说过LESS。这是一个不错的小工具，可以让您在 CSS 中拥有“变量”。这似乎是您真正想要的。

看看This blog post 应该对你有帮助。

【讨论】：