使用jquery替换css中的特定颜色代码

我想用jquery将#789034代码替换为另一个类似#456780的代码，在main.css中可以找到它

我有一个main.css文件，如下所示：

.common-color
{
  color:#789034;
}

.new-cls
{
  border-color:#789034;
  height:300px;
}

.awesome-one
{
  background-color:#789034;
  height:200px;
  width:300px;
}

我想使用jquery将#789034代码替换为另一个类似#456780的代码，如main.css中的代码：

$(each where code=#789034)
{
  set code: #456780;
}

---

你可以考虑用jQuery来修改它。

$(function() {
  $('.awesome-one').hover( function(){
     $(this).css('background-color', '#789034');
  },
  function(){
     $(this).css('background-color', '#456780');
  });
});

---

您可能希望尝试以下操作：

将样式表内联到文档中，并用样式标记包装：

<style id="myStyles" type="text/css"> /* all your css here */ </style>

然后继续执行替换魔术：

myCSS = myCSS.replace(/#789034/g, "#456780");

在最后一次充满希望的努力中，将其放回DOM：

document.getElementById('myStyles').innerHTML = myCss;

---

但即使这样做可行，在我看来，你很有可能带来了一份工作。

为什么，亲爱的华生，这是最基本的。只需抓取所有可能的样式键，检查它们是否包含单词color，然后使用复杂的正则表达式系统将所有出现的颜色替换为新的颜色

//收集所有样式“关键点”，如高度、宽度、颜色等
var keys=Object.values（window.getComputedStyle（$（'html'）.get（0））；
//删除所有与颜色无关的样式键
var filteredKeys=keys.filter（函数（键）{return key.indexOf（'color'）>-1}）；
//将要替换的颜色的十六进制字符串解析为其R、G和B部分，并将它们存储在数组中
var colors=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（“#789034”）。拼接（1,3）；
//将这些十六进制字符串转换为十进制，并将它们组合为“rgb（#、#、#）格式的颜色字符串
var rgb='rgb（'+colors.map（函数（color）{return parseInt（color，16）}）.join（'，'）+'）；
//浏览页面中的每个元素
$（“*”）。每个（函数（索引、元素）{
//检查每个与颜色相关的样式“键”
filteredKeys.forEach（功能（键）{
//如果此键的元素值与要替换的颜色匹配。。。
if（$（元素）.css（键）=rgb）{
//…用替换颜色替换该颜色
$（元素）.css（键“#456780”）；
}
});
});
div{
高度：50px；
宽度：50px；
}
.普通颜色{
颜色：#789034；
}
.新的cls{
边框样式：实心；
边框颜色：#789034；
}
.真棒{
背景色：#789034；
高度：200px；
宽度：300px；
}

你好
酷
这里有一个解决方案，我将逐步解释

首先，调用
colorplace（#789034“，#456780”）。第一个值是目标颜色，第二个值是替换颜色

在其中，
$（'*'）.map（函数（i，el）{
将选择DOM树中的所有标记。对于每个元素，将返回其
getComputedStyle（el）
styles数组。您可以自定义选择器以加快处理（例如，
$（'div'）.map（函数（i，el））{
）

所有包含“颜色”的样式属性（例如
背景色
，
-moz轮廓色
等），将检查颜色值是否等于目标颜色。如果是，将用目标颜色替换

返回的颜色类似于
rgba（0,0,0,0）
或
rgb（0,0,0）
，而不像
#FFFFFF
，因此从rgb快速转换为十六进制进行比较。这使用内部
rgb2hex（）
函数

我希望这就是你要找的



函数colorReplace（FindExcolor，replaceWith）{
//将rgb颜色字符串转换为十六进制
//参考：https://stackoverflow.com/a/3627747/1938889
函数rgb2hex（rgb）{
if（/^#[0-9A-F]{6}$/i.test（rgb））返回rgb；
rgb=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
函数十六进制（x）{
返回（“0”+parseInt（x）.toString（16））.slice（-2）；
}
返回“#”+hex（rgb[1]）+hex（rgb[2]）+hex（rgb[3]）；
}
//在每个标记上选择并运行映射函数
$（'*'）.map（函数（i，el）{
//获取每个标记的计算样式
var styles=window.getComputedStyle（el）；
//检查每个计算样式并搜索“颜色”
对象。键（样式）。减少（功能（acc，k）{
变量名称=样式[k]；
var value=styles.getPropertyValue（名称）；
如果（值！==null&&name.indexOf（“颜色”）>=0）{
//将rgb颜色转换为十六进制并与目标颜色进行比较
if（value.indexOf（“rgb（”）>=0&&rgb2hex（value）==findExcolor）{
//替换此找到的颜色属性上的颜色
$（el）.css（名称，替换为）；
}
}
});
});
}
//像这样为每个要替换的颜色属性调用
颜色替换（“789034”、“456780”）；
。常用颜色{
颜色：#789034；
}
.新的cls{
边框颜色：#789034；
边框宽度：4px；
边框样式：实心；
}
.真棒{
背景色：#789034；
}

颜色
边框颜色
背景色
您可以通过使用CSS变量来实现此功能。请在main.CSS文件中定义一个变量

:root {   
    --color1: #789034; 
}

并使用此变量而不是颜色代码

.common-color
{
  color: var(--color1);
}

现在，您可以通过在参数中传递新颜色来实现以下函数来更改颜色

function ChangeColor1(newColor)
{
  document.documentElement.style.setProperty('--color1',newColor);
}

您的代码只是作为背景，我清楚地提到，它应该在找到它的所有地方更改为这个#789034#456780-感谢您可能应该有一个具有
颜色的类：#789034；
，并将这个类添加到需要这个颜色的所有元素中。然后使用jQuery:
$（'.myClass'）很容易更改颜色.css（'color'，'#456780'）
这实际上是不可能的，因为我在服务器属性上使用它，比如border color:#789034-我想我为代码创建了一个通用的颜色类如何传递该类作为border color-比如1px solid--.comon-color.means？？实际上我明确地说我想使用jquery-Yo一次性将特定的颜色代码替换到其他所有地方你的代码选择属性，我只想要新的颜色代码真的很抱歉，如果我是粗鲁的-这不是我的本意，真的很抱歉，是的，我很接近，非常感谢，只是它有额外的东西，即
function ChangeColor1(newColor)
{
  document.documentElement.style.setProperty('--color1',newColor);
}