我想将#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代码替换为另一个代码,它使用jquery在main.css中找到它：
$(each where code=#789034)
{
set code: #456780;
}
解决方法
这是一个解决方案,我将逐步解释.
首先,调用colorReplace(“#789034”,“#456780”);.第一个值是目标颜色,第二个值是替换颜色.
在它内部,$(‘*’).map(function(i,el){将选择DOM树中的所有标签.对于每个元素,返回其getComputedStyle(el)样式数组.您可以自定义选择器以加快处理速度(例如$(‘div’).map(function(i,el)){).
所有包含“颜色”的样式属性(例如背景颜色,-moz-outline-color等),将检查颜色值是否等于目标颜色.如果是这样,它将被目标颜色替换.
返回的颜色类似于rgba(0,0)或rgb(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;
}
<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>