是否存在将十六进制颜色代码文本转换为具有该颜色的CSS正方形的功能？

Question

我需要将一堆具有十六进制颜色代码（例如#fff）的文本转换为具有该颜色的正方形/缩略图（具有CSS样式的div）。

是否有一个jQuery函数（或类似的函数）来实现？

谢谢

Answer 1

jQuery中没有可立即使用的功能来执行此任务，但是很容易将类似于您使用jQuery提供的工具描述的内容存档：

function createColorSquares(colors) {
  for (let color of colors) {
    let square = $('<span>', { class: 'colorSquare' }).css('background-color', color);
    $('body').append(square);
  }
}

let myColors = ['#f00', '#ff0', '#f0f', '#0ff'];
createColorSquares(myColors);

.colorSquare {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>