JS使用.style修改DOM样式不生效：PokeAPI开发宝可梦图鉴样式异常

问题原因 #

• 你在generatehtml函数外就提前执行了document.querySelector(".power1 p")，此时对应DOM元素还未渲染到页面，获取到的是null，修改样式自然无效。而且如果生成多张宝可梦卡片，全局只选一个p标签也匹配不到对应卡片里的元素。
• 你创建了card元素并设置了背景样式，但你写的newhtml字符串里又嵌套了一层class="pokecard"的div，且没有把newhtml插入到你创建的card元素中，也没有把card插入到页面DOM树里，设置的样式自然不会在页面生效。
• 你没有限制themecolor的作用域，未声明就直接赋值会变成全局变量，可能引发全局污染。

修复方案 #

1. 把获取对应卡片内.power1 p的逻辑移到generatehtml函数内，在你把HTML内容插入到card之后再查询该元素
2. 移除newhtml里多余的<div class=pokecard>外层标签，或者直接把newhtml赋值给card.innerHTML，不要额外嵌套
3. 完成样式设置后，要把card元素插入到页面的容器节点里（也就是你页面里存放所有卡片的父容器）

修正后的参考代码 #

const typecolor = {
  bug: "#26de81",
  dragon: "#ffeaa7",
  electric: "#fed330",
  fairy: "#FF0069",
  fighting: "#30336b",
  fire: "#f0932b",
  flying: "#81ecec",
  grass: "#00b894",
  ground: "#EFB549",
  ghost: "#a55eea",
  ice: "#74b9ff",
  normal: "#95afc0",
  poison: "#6c5ce7",
  psychic: "#a29bfe",
  rock: "#2d3436",
  water: "#0190FF",
};
// 示例中默认你页面上存放所有宝可梦卡片的父容器class为card-container，可根据实际类名修改
const cardContainer = document.querySelector(".card-container");

function generatehtml(result) {
  const card = document.createElement("div");
  card.classList.add("pokecard");
  // 这里移除了外层多余的pokecard div，仅保留你原来的卡片内部HTML内容即可
  let newhtml = `
    <!-- 此处替换为你原本的卡片内部代码 -->
    <div class="power1">
      <p>技能内容</p>
    </div>
  `
  // 将HTML内容插入到创建的card元素中
  card.innerHTML = newhtml;
  // 声明为局部变量避免全局污染
  const themecolor = typecolor[result.types[0].type.name]; 
  card.style.background = `radial-gradient(circle at 50% 0%, ${themecolor} 36%, #ffffff 36%)`;
  // 仅在当前卡片内查询p标签，不会和其他卡片的元素冲突
  const abilities = card.querySelector(".power1 p");
  if(abilities) {
    abilities.style.backgroundColor = themecolor;
  }
  // 把生成的卡片插入到页面父容器，修改的样式才会在页面渲染生效
  cardContainer.appendChild(card);
}

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