使用jquery替换css中的特定颜色代码 [英] Replacing Specific color code in css using jquery
问题描述
我想将#789034代码替换为#456780之类的其他代码,使用jquery在main.css中找到它
I want to replace #789034 code to another code like #456780 where ever it finds in main.css using jquery
我有一个main.css文件的东西如下所示:
I am having a main.css file something like below :
.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中查找:
I want to replace #789034 code to another code like #456780 where ever it finds in main.css using jquery like :
$(each where code=#789034)
{
set code: #456780;
}
推荐答案
这是我的解决方案我将逐步解释。
Here is a solution which I'll explain step-by-step.
首先,调用 colorReplace(#789034,#456780);
。第一个值是目标颜色,第二个值是替换颜色。
First, call colorReplace("#789034", "#456780");
. The first value is the target color, and the second is the replacement color.
在其中, $('*')。map(函数) (i,el){
将选择DOM树中的所有标签。对于每个元素,返回其 getComputedStyle(el)
styles数组。可以自定义选择器以加快处理速度(例如 $('div')。map(function(i,el)){
)。
Inside it, $('*').map(function(i, el) {
will select all tags in the DOM tree. For each element, its getComputedStyle(el)
styles array is returned. You can customize the selector for faster processing (e.g. $('div').map(function(i, el)) {
).
所有包含颜色的样式属性(例如 background-color
, -moz-outline-color
等等,将检查颜色值是否等于您的目标颜色。如果是,它将被替换为目标颜色。
All style attributes containing "color" (e.g. background-color
, -moz-outline-color
, etc.), it will be checked if the color value is equal to your target color. If so, it will be replaced with the target color.
颜色是返回如 rgba(0,0,0,0)
或 rgb(0,0,0)
,不喜欢 #FFFFFF
,所以从rgb快速转换为十六进制用于比较。这使用内部 rgb2hex()
功能。
Colors are returned like rgba(0,0,0,0)
or rgb(0,0,0)
, not like #FFFFFF
, so a quick conversion is done from rgb to hex for the comparison. That uses the internal rgb2hex()
function.
我希望这是你想要的。
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="common-color">color</div>
<div class="new-cls">border-color</div>
<div class="awesome-one">background-color</div>
这篇关于使用jquery替换css中的特定颜色代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!