使用 jQuery/JS 从 div 获取所有颜色

Question

是否可以获取 div 中存在于某个 class 及其子元素中的所有颜色值？

例如，我有：

<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 在同一个 div 中显示图表。那里也可以使用颜色吗？

我想我无法为你们说得更清楚了，

非常感谢！

工作

Answer 1

您可以使用：

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

如果你想要十六进制的颜色，你可以参考这个

Answer 2

您可以循环遍历 div

中的所有元素

Fiddle

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

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

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);

使用 jQuery/JS 从 div 获取所有颜色

Getting all colors from a div with jQuery/JS

javascript

jquery

html

css

highcharts