Wymiana specyficzny kod koloru w css za pomocą jQuery

Question

Chcę zastąpić # 789034 kod do innego kodu, takich jak # 456780, gdzie zawsze znajdzie się main.css użyciu jquery

Mam plik main.css coś jak poniżej:

.common-color 
{ 
    color:#789034; 
} 

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

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

Chcę zastąpić # 789034 kodu do innego kodu jak # 456780, gdzie zawsze znajdzie się main.css użyciu jquery jak:

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

Answer 1

Oto rozwiązanie, które wytłumaczę krok po kroku.

Najpierw zadzwoń pod numer colorReplace("#789034", "#456780");. Pierwsza wartość to kolor docelowy, a druga kolor zastępczy.

Wewnątrz tego obiektu $('*').map(function(i, el) { wybierze wszystkie znaczniki w drzewie DOM. Dla każdego elementu zwracana jest jego tablica stylów getComputedStyle(el). Możesz dostosować selektor do szybszego przetwarzania (np. $('div').map(function(i, el)) {).

Wszystkie atrybuty stylu zawierające "kolor" (np. background-color, -moz-outline-color itp.), Sprawdzenie, czy wartość koloru jest równa kolorowi docelowemu. Jeśli tak, zostanie zastąpiony kolorem docelowym.

Kolory są zwracane jak rgba(0,0,0,0) lub rgb(0,0,0), a nie jak #FFFFFF, więc szybka konwersja jest wykonywana z rgb na hex dla porównania. To wykorzystuje wewnętrzną funkcję rgb2hex().

Mam nadzieję, że to jest to, czego szukasz.

---

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>

Answer 2

można rozważyć zmianę go z jQuery.

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

Answer 3

Możesz też spróbować wykonać następujące czynności:

Połóż stylów inline do dokumentu, owinięta przez tag styl:

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

Teraz prawdopodobnie można uzyskać całą zawartość tego poprzez

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

Następnie wykonaj czynność magiczną:

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

A w ostatnim, w nadziei, wysiłku, umieścić go z powrotem w DOM:

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

Ale nawet jeśli to powinno działać, wydaje mi się bardzo prawdopodobne, że jesteś wniesienia XY problem.

Answer 4

Dlaczego, jego elementarny, drogi Watsonie. Po prostu weź wszystkie możliwe klucze stylów, sprawdź, czy zawierają kolor słów, przekonwertuj je z wielbłąda do dzielonego wyrazu, a następnie zastąp wszystkie wystąpienia koloru nowym za pomocą złożonego systemu wyrażeń regularnych. DUH!

... mam zbyt wiele wolnego czasu, przepraszam:

var keys = Object.keys($('html').get(0).style); 
 
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\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(/([a-z])([A-Z])/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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="common-color">hello</div> 
 
<p class="new-cls">cool</p> 
 
<div class="awesome-one"></div>