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

我想将＃789034代码替换为另一个代码，如＃456780，它使用jquery在main.css中找到它

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

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

我想将＃789034代码替换为另一个代码，如＃456780，它使用jquery在main.css中找到它：

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

Answer 1

这是一个解决方案，我将逐步解释。

首先，调用colorReplace("#789034", "#456780"); 。 第一个值是目标颜色，第二个值是替换颜色。

在它内部， $('*').map(function(i, el) {将选择DOM树中的所有标签。对于每个元素，返回其getComputedStyle(el)样式数组。您可以自定义选择器以加快处理速度（例如$('div').map(function(i, el)) { ）。

所有包含“颜色”的样式属性（例如background-color ， -moz-outline-color等），将检查颜色值是否等于目标颜色。 如果是这样，它将被目标颜色替换。

返回的颜色类似于rgba(0,0,0,0)或rgb(0,0,0) ，而不是#FFFFFF ，因此可以从rgb到hex进行快速转换以进行比较。 这使用内部rgb2hex()函数。

我希望这就是你要找的东西。

---

 function colorReplace(findHexColor, replaceWith) { // Convert rgb color strings to hex function rgb2hex(rgb) { if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb; rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } // Select and run a map function on every tag $('*').map(function(i, el) { // Get the computed styles of each tag var styles = window.getComputedStyle(el); // Go through each computed style and search for "color" Object.keys(styles).reduce(function(acc, k) { var name = styles[k]; var value = styles.getPropertyValue(name); if (value !== null && name.indexOf("color") >= 0) { // Convert the rgb color to hex and compare with the target color if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) { // Replace the color on this found color attribute $(el).css(name, replaceWith); } } }); }); } // Call like this for each color attribute you want to replace colorReplace("#789034", "#456780"); 

 .common-color { color: #789034; } .new-cls { border-color: #789034; border-width: 4px; border-style: solid; } .awesome-one { background-color: #789034; } 

  
color
 
border-color
 
background-color 

Answer 2

为什么，它的基本，亲爱的沃森。 只需抓住所有可能的样式键，检查它们是否包含单词color，将它们从camel case转换为hyphenated，然后使用复杂的regex系统将所有出现的颜色替换为新的颜色。 DUH！

……我有太多的空闲时间，抱歉：

 var keys = Object.keys($('html').get(0).style); var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec('#789034'); var rgb = 'rgb(' + parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) + ')'; for (var k in keys) { key = keys[k].replace(/([az])([AZ])/g, '$1-$2').toLowerCase(); if (key.indexOf('color') > -1) { $("*").each(function () { if ($(this).css(key) == rgb) { $(this).css(key, '#456780'); } }); } } 

 div { height: 50px; width: 50px; } .common-color { color:#789034; } .new-cls { border-style: solid; border-color:#789034; } .awesome-one { background-color:#789034; height:200px; width:300px; } 

  
hello
 
cool
 
 

Answer 3

你可以考虑用jquery来改变它。

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

Answer 4

您可能想尝试以下操作：

将样式表内嵌到文档中，由样式标记包装：

现在你可以获得这个via的所有内容

 var myCss = $("#myStyles").text(); 

然后继续做替换魔术：

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

在最后，有希望的努力，把它放回DOM：

 $("#myStyles").text(myCss); 

但即使这应该有效，在我看来你很可能会带来XY问题 。