Cách lấy màu nền hiệu dụng của phần tử trong suốt với javascript/jQuery

Question

Về cơ bản, tôi có một phần tử trên trang có thể được chèn ở nhiều vị trí khác nhau. Nó không có bộ màu nền nhưng tùy thuộc vào màu nền của vị trí mà nó được chèn vào Tôi có thể muốn thực hiện một vài thay đổi cho nó.

Câu hỏi của tôi là: làm thế nào để có được background-color hiệu quả đối với một yếu tố thậm chí nếu đó background-color có thể đã được thừa hưởng từ cha mẹ (có khả năng tất cả các cách để cơ thể).

Dưới đây là một ví dụ đơn giản mà tôi muốn tìm ra background-color của .color-me

<div class="cont"> 
    <div class="color-me">what's my background-color?</div> 
</div> 

Và một codepen: http://codepen.io/evanhobbs/pen/FbAnL/

Answer 1

Điều này có thể đưa ra một số (khá lớn) hãy cẩn thận. zzzzBov tổng hợp chúng trong một nhận xét về câu hỏi:

... sự phức tạp xuất hiện khi bạn cần bắt đầu tính đến hình nền tài khoản, độ dốc, giá trị rgba và độ mờ. Tương đối đơn giản để có được màu của bố mẹ gần nhất với màu nền không trong suốt, nó có thể không phải là màu thực tế đằng sau phần tử.

Với những cảnh báo đó, về cơ bản bạn phải lấy màu nền của phần tử và nếu trong suốt, hãy chuyển đến phần tử gốc, v.v.

các trình duyệt khác nhau có những quan điểm khác nhau về "minh bạch", đây là một ví dụ bao gồm hầu hết trong số họ: Updated Pen

$(function() { 
    var bc; 
    var $elm = $(".color-me"); 
    while (isTransparent(bc = $elm.css("background-color"))) { 
    if ($elm.is("body")) { 
     console.log("Gave up"); 
     return; 
    } 
    $elm = $elm.parent(); 
    } 
    console.log("Effective color: " + bc); 

    function isTransparent(color) { 
    switch ((color || "").replace(/\s+/g, '').toLowerCase()) { 
     case "transparent": 
     case "": 
     case "rgba(0,0,0,0)": 
     return true; 
     default: 
     return false; 
    } 
    } 
}); 

Tôi không hoàn toàn chắc chắn đây là có thể với tất cả các trình duyệt, đặc biệt là không những người mà trả lại một giá trị rgb (không phải rgba) cho màu đã tính.

Answer 2

Tôi rất thích jsfiddle nhưng ở đây là của bạn được cập nhật codepen .. http://codepen.io/anon/pen/nhDGC Thêm chức năng ẩn danh như vậy để sử dụng nó chỉ cần gọi $('.yourselector').getBg();

jQuery.fn.getBg = function() { 
return $(this).parents().filter(function() { 

    var color = $(this).css('background-color'); 

    if(color != 'transparent' && color != 'rgba(0, 0, 0, 0)' && color != undefined) 
    { return color; 
    } 
}).css('background-color'); 
}; 

$(function() { 
    //console.log($('.cont').css('background-color')); 
    console.log($('.color-me').getBg()) 
    $('.color-me').append($('.color-me').getBg()); 

    console.log($('.color-me2').getBg()) 
    $('.color-me2').append($('.color-me2').getBg()); 
}); 

Nó lọc cha mẹ + sẽ trở lại khi nó tìm thấy màu nền hiện có.

Answer 3

Đây là một cách thanh lịch để giải quyết vấn đề này (xin lỗi, tôi thích CoffeeScript). Nó bắt đầu tìm kiếm từ bản thân, nhưng bạn luôn có thể sử dụng $el.parents().each ->.

findClosestBackgroundColor = ($el) -> 
    background = 'white' 
    $.merge($el, $el.parents()).each -> 
     bg = $(this).css('background-color') 
     if color isnt 'transparent' and !/rgba/.test(color) 
     background = bg 
     return false 
    background 

DEMO: Sử dụng coffeescript.org để biên dịch này để javascript và chạy này trong một giao diện điều khiển trên bất kỳ trang nào có jQuery bao gồm.