Получение всех цветов из div с помощью jQuery/JS

Question

Возможно ли получить все цветовые значения, существующие в div с определенным классом, и его дочерние элементы?

, например, у меня есть:

<div class="row client"> 
<a href="somepage.php" style="color:#515151;">Link1</a> 
<span style="color:#f3f3f3;">Span</span> 
<h3 style="color:#ff00ff;">Subtitle</h3> 
</div> 

Я хочу, чтобы массив, чтобы получить все цвета:

background of the parent div 
color of the <a> element 
color of the <span> element 
color of the <h3> element 

Кроме того, я использую highcharts для отображения диаграммы в том же дел. Можно ли использовать там и цвета?

Я не думаю, что я могу поставить это яснее для вас, ребята,

Большое спасибо!

Работа

Answer 1

Вы можете просто перебрать все элементы в div

Fiddle

var elements = $(".client").children() 

$(elements).each(function(index) { 
    console.log(index + ": " + $(this).css("color")); 
}); 

Answer 2

Вы можете использовать:

var colorarray=[]; 
$('.client').children().addBack().each(function(){ 
    if(!$(this).is('.client')) 
    colorarray.push("color of the <" +$(this).prop("tagName")+"> is "+ $(this).css('color')) 
    else 
    colorarray.push("background of <" +$(this).prop("tagName")+"> is "+ $(this).css('backgroundColor')) 
}) 

Working Demo

Если вы хотите, чтобы цвет в шестнадцатеричном, вы можете передать этот https://stackoverflow.com/a/1740716/1719752

Answer 3

Вот довольно неэффективно, но, я думаю, легко понять подход без библиотек:

let allNodes = Array.from(document.querySelectorAll('*')); 

let setOfColors = allNodes.reduce((colors,el) => { 
    return colors.add(getComputedStyle(el).backgroundColor) 
}, new Set) 


let arrayOfColors = Array.from(setOfColors);