Thay mã màu cụ thể trong css sử dụng jquery

Question

Tôi muốn thay thế # 789.034 mã để một mã như # 456.780 cứ nơi nào nó tìm thấy trong main.css sử dụng jquery

Tôi gặp một cái gì đó file main.css như dưới đây:

.common-color 
{ 
    color:#789034; 
} 

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

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

tôi muốn thay thế # 789.034 mã để một mã số, như # 456.780 cứ nơi nào nó tìm thấy trong main.css sử dụng jquery như:

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

Answer 1

Dưới đây là một giải pháp mà tôi sẽ giải thích từng bước.

Trước tiên, hãy gọi colorReplace("#789034", "#456780");. Giá trị đầu tiên là màu mục tiêu và màu thứ hai là màu thay thế.

Bên trong nó, $('*').map(function(i, el) { sẽ chọn tất cả các thẻ trong cây DOM. Đối với mỗi phần tử, mảng kiểu dáng getComputedStyle(el) của nó được trả lại. Bạn có thể tùy chỉnh bộ chọn để xử lý nhanh hơn (ví dụ: $('div').map(function(i, el)) {).

Tất cả thuộc tính kiểu có chứa "màu" (ví dụ: background-color, -moz-outline-color, v.v.), nó sẽ được kiểm tra nếu giá trị màu bằng với màu mục tiêu của bạn. Nếu vậy, nó sẽ được thay thế bằng màu đích.

Màu sắc được trả lại như rgba(0,0,0,0) hoặc rgb(0,0,0), không giống như #FFFFFF, do đó, chuyển đổi nhanh được thực hiện từ rgb sang hex để so sánh. Điều đó sử dụng hàm nội bộ rgb2hex().

Tôi hy vọng đây là những gì bạn đang tìm kiếm.

---

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

bạn có thể xem xét thay đổi nó với jquery.

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

Answer 3

Bạn có thể muốn thử như sau:

Đặt inline stylesheet của bạn vào tài liệu, được bao bọc bởi một thẻ phong cách:

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

Bây giờ bạn có lẽ có thể nhận được tất cả các nội dung này qua

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

Sau đó tiếp tục và thực hiện phép thay thế:

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

Và trong một nỗ lực hy vọng cuối cùng, đưa nó trở lại trong DOM:

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

Nhưng ngay cả nếu điều này nên làm việc, có vẻ như với tôi rất có thể xảy ra mà bạn đang mang một XY problem.

Answer 4

Tại sao, tiểu học Watson thân yêu của nó. Chỉ cần lấy tất cả các phím kiểu có thể, kiểm tra xem chúng có chứa màu từ hay không, chuyển đổi chúng từ trường hợp lạc đà thành gạch nối, sau đó thay thế tất cả các lần xuất hiện của màu bằng cách sử dụng hệ thống regex phức tạp. DUH!

... Tôi có quá nhiều thời gian rảnh rỗi, xin lỗi:

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>