如何根据PokeApi返回的宝可梦属性修改对应容器类的背景色

直接按以下步骤修改即可：

• 先建立宝可梦属性与对应主题色的映射表，配色直接采用官方设定的属性标准色即可
• 修复现有代码的两个小问题：变量名大小写不一致导致的引用错误、随机数范围多算1个的问题
• 渲染卡片时根据宝可梦的属性动态给卡片容器添加背景色样式，单属性用纯色、双属性可自行选择用主属性纯色或者双属性渐变

首先在脚本全局位置添加属性颜色映射：

// 属性-对应背景色映射
const typeColor = {
  normal: '#A8A77A',
  fire: '#EE8130',
  water: '#6390F0',
  electric: '#F7D02C',
  grass: '#7AC74C',
  ice: '#96D9D6',
  fighting: '#C22E28',
  poison: '#A33EA1',
  ground: '#E2BF65',
  flying: '#A98FF3',
  psychic: '#F95587',
  bug: '#A6B91A',
  rock: '#B6A136',
  ghost: '#735797',
  dragon: '#6F35FC',
  dark: '#705746',
  steel: '#B7B7CE',
  fairy: '#D685AD'
}

修改数据拉取逻辑，不要提前把属性数组拼接成字符串，保留原始数组方便后续取色：

// 统一变量名，修正原代码大小写不一致的问题
const pokemonGenerated = document.getElementById('pokemongenerated');

const fetchPokemon = () => {
  // 编号范围1-905，随机数计算修正为*905，原写法会生成906号超出范围
  const randomID = Math.floor(Math.random() * 905) + 1;
  const url = `https://pokeapi.co/api/v2/pokemon/${randomID}`;

  fetch(url).then(res => res.json()).then(data => {
    const pokemon = {
      name: data.name,
      image: data.sprites['front_default'],
      types: data.types.map(type => type.type.name), // 保留属性数组
      id: data.id
    }
    displayPokemon(pokemon);
  })
};

修改渲染函数，动态给卡片绑定背景色：

const displayPokemon = (pokemon) => {
  // 取第一个属性作为主背景色，加兜底色防止匹配异常
  const mainBg = typeColor[pokemon.types[0]] || '#f5f5f5';
  // 展示时再拼接属性文本
  const typeText = pokemon.types.join(', ');

  const cardHTML = `
    <ul class="card" style="background-color: ${mainBg}">
      <img class="card-image" src="${pokemon.image}"/>
      <h2 class="card-name">${pokemon.id}. ${pokemon.name}</h2>
      <p class="card-type">Type: ${typeText}</p>
    </ul>
  `;
  pokemonGenerated.innerHTML = cardHTML;
};

// 页面初始加载生成第一只
fetchPokemon();
// 给生成按钮绑定点击事件即可触发随机生成，替换成你实际的按钮ID
document.querySelector('#generateBtn')?.addEventListener('click', fetchPokemon);

如果要实现双属性渐变效果，把背景色相关代码替换为以下内容即可：

const color1 = typeColor[pokemon.types[0]];
const color2 = pokemon.types[1] ? typeColor[pokemon.types[1]] : color1;
const bgStyle = `background: linear-gradient(120deg, ${color1}, ${color2})`;
// 卡片ul标签的style属性直接使用${bgStyle}即可

内容的提问来源于stack exchange，提问作者ChandlerDorsey