Firefox中点击坦克列表触发newDoc()时出现TypeError: tankImg.style is undefined报错

看起来你遇到的核心问题是在Firefox里调用newDoc()时，无法访问tankImg的style属性——本质是这个元素本身是undefined或者null。我来帮你拆解可能的原因和对应的解决办法：

1. 先确认tankImg元素是否正确创建/获取 #

从你给出的代码片段看，你是在清空root的innerHTML后动态创建元素（var previewBox1 = do...），大概率是tankImg的创建逻辑出了问题，导致在Firefox中没有生成有效的DOM元素。

• 首先补全并检查tankImg的创建代码，确保是通过document.createElement('img')正确生成的，比如：

var tankImg = document.createElement('img');
// 给img设置必要的属性，比如src、className等
tankImg.src = '你的坦克图片路径';
tankImg.className = 'tank-img';

• 在访问tankImg.style之前，一定要先做存在性判断，避免报错：

if (!tankImg) {
  console.error('tankImg元素未成功创建，请检查创建逻辑');
  return; // 提前终止函数，避免后续报错
}
// 之后再操作style
tankImg.style.width = '200px';
// ...其他style设置

2. 修正事件绑定中的this指向问题 #

你代码里用了alert(this.className)，在不同浏览器中，事件处理函数的this指向可能存在兼容性差异（比如Firefox对某些绑定方式的this处理和Chrome不同）。更可靠的方式是使用event.target来获取触发点击的元素：

function newDoc(event) {
  // 用event.target替代this，确保获取到点击的列表元素
  const clickedElement = event.target;
  alert(clickedElement.className);
  
  var root = document.getElementById('root'),
      originTree = root.innerHTML;
  root.innerHTML = '';
  
  // 后续创建元素的逻辑...
}

这样不管在哪个浏览器，都能准确拿到点击的元素，避免因this指向错误导致后续元素创建逻辑异常。

3. 检查动态DOM操作的顺序 #

你先清空了root的innerHTML，再创建新元素。要确保在操作tankImg.style之前，已经把tankImg挂载到了DOM树上（或者至少已经完成了元素的初始化）。有些浏览器对未挂载的元素的style属性支持有限，你可以先设置好元素的所有属性和样式，再把它添加到previewBox1或者root中：

// 先创建并设置tankImg的所有属性
var tankImg = document.createElement('img');
tankImg.src = 'xxx.jpg';
tankImg.style.width = '100%';
tankImg.style.borderRadius = '8px';
// 再把tankImg添加到父元素
previewBox1.appendChild(tankImg);
// 最后把previewBox1添加到root
root.appendChild(previewBox1);

按照这几个步骤排查，应该能解决Firefox中的报错问题。如果还有疑问，可以把tankImg创建的完整代码贴出来，方便进一步定位。

内容的提问来源于stack exchange，提问作者Юрій Зітинюк