function colorReplace(findHexColor, replaceWith) {
// Convert rgb color strings to hex
// REF: https://stackoverflow.com/a/3627747/1938889
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("#512a69", "#ef7e8e");
1条答案
按热度按时间ffx8fchx1#
这里有一个解决方案,我将逐步解释。
首先,调用
colorReplace("#512a69", "#ef7e8e");
。第一个值是目标颜色,第二个值是替换颜色。在其中,
$('*').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()
函数。我希望这是你正在寻找的。
来源:https://stackoverflow.com/a/30724171/1136132