JavaScript设置的box-shadow样式在Chrome浏览器中无法生效

你的代码在Firefox生效但Chrome/Edge无效，大概率不是boxShadow属性本身的问题，以下是几个常见排查方向：

• 先确认目标元素是否存在
  很多时候是代码执行时机不对（DOM还没加载完成），或者索引i超出了td元素的数量范围。可以在设置样式前加日志验证：

  const targetTd = [...document.getElementsByTagName("td")][i];
  console.log(targetTd); // 如果输出undefined，说明没拿到有效元素
  

  要是DOM未加载完成，把代码放到DOMContentLoaded事件回调里，或者直接移到页面底部（</body>标签前）执行：

  document.addEventListener('DOMContentLoaded', function() {
    const tds = [...document.getElementsByTagName("td")];
    if (i < tds.length) {
      tds[i].style.boxShadow = "10px 20px 30px blue";
    }
  });
  

• 检查CSS优先级冲突
  打开Chrome/Edge的开发者工具（F12），选中目标td元素查看「样式」面板，看box-shadow属性是否被外部CSS的高优先级规则（比如带!important的样式、ID选择器）覆盖。如果是冲突导致，可临时用!important强制生效（不推荐长期依赖，建议调整CSS选择器优先级）：

  targetTd.style.boxShadow = "10px 20px 30px blue !important";
  

• 兼容旧版浏览器的写法（可选）
  现代Chrome/Edge已无需前缀，但如果是极旧版本，可同时添加webkit前缀尝试：

  targetTd.style.boxShadow = "10px 20px 30px blue";
  targetTd.style.webkitBoxShadow = "10px 20px 30px blue";
  

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