时间戳

首页 > 解决方案 > 如何使字母表特定颜色的javascript颜色字母

javascript - 如何使字母表特定颜色的javascript颜色字母

问题描述

我正在寻找一种使用 javascript、HTML、CSS 来获取英文字母并将每个字母着色为网页或 javascript dom 输出的特定颜色的方法。

任何人都可以帮助我的任何帮助，我真的很感激。谢谢，

标签： javascripthtmlcss

解决方案

下面是一个使用 javascript 的简单示例。

const container = document.getElementById("container");
const container2 = document.getElementById("container2");
const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
const colors = ['#FFAA00', '#DDAA00', '#FFFA00', '#FFAAAA', '#121212', '#F1D3A4', '#FAAA43', '#459878', '#234578', '#ADAEAF', ];
letters.forEach((letter) => {
  const elem = document.createElement('span');
  const r = Math.random() * 255;
  const g = Math.random() * 255;
  const b = Math.random() * 255;
  elem.innerText = letter;
  elem.style.color =  'rgb('+r+','+g+','+b+')';
  container.appendChild(elem);
});
letters.forEach((letter, index) => {
  const elem = document.createElement('span');
  elem.innerText = letter;
  elem.style.color = colors[index];
  container2.appendChild(elem);
});
body {
  font-size: 2em;
}
<div id="container"></div>

<div id="container2"></div>

推荐阅读