网站预加载器3秒后无法隐藏，遇loader.style未定义错误求助

错误原因分析 #

• 选择器错误：你用document.getElementsByClassName('hi mosaic-loader')试图获取同时包含hi和mosaic-loader类的元素，但实际这两个类分别属于<h1>和预加载器<div>，没有元素同时拥有这两个类，导致返回空集合。
• 返回值类型错误：getElementsByClassName返回的是HTMLCollection元素集合，不是单个DOM元素，直接调用.style会触发undefined报错，必须通过索引（如[0]）获取集合中的单个元素。
• 目标元素错误：需要隐藏的是预加载器.mosaic-loader，而非<h1 class="hi">。

修复后的代码 #

修改后的JavaScript #

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 获取预加载器元素（取集合第一个元素）
const loader = document.getElementsByClassName('mosaic-loader')[0];
sleep(3000).then(() => { hideit() });

function hideit() {
  // 直接获取目标元素并设置隐藏样式
  const loader = document.getElementsByClassName('mosaic-loader')[0];
  loader.style.display = "none";
}

function multiplicationTable() {
    var table;
    table='<table id="tata" >';

    var number=document.getElementById("number").value;
    for(i=1;i<=number;i++){
     table+='<tr>';
      for(num=1;num<=number;num++){
          table+='<td>'+num*i+'</td>';
       }
       table+='</tr>';
      }
    table+='</table>';
    document.getElementById("result").innerHTML = table;
}

更简洁的优化方案（可选） #

用querySelector直接获取单个元素，无需处理集合：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(3000).then(() => { 
  document.querySelector('.mosaic-loader').style.display = "none";
});

// 乘法表函数保持不变
function multiplicationTable() {
    var table;
    table='<table id="tata" >';

    var number=document.getElementById("number").value;
    for(i=1;i<=number;i++){
     table+='<tr>';
      for(num=1;num<=number;num++){
          table+='<td>'+num*i+'</td>';
       }
       table+='</tr>';
      }
    table+='</table>';
    document.getElementById("result").innerHTML = table;
}

额外说明 #

• document.querySelector('.mosaic-loader')直接返回匹配的第一个DOM元素，比getElementsByClassName更直观，适合单个元素的获取场景。
• 若需隐藏多个同类型元素，再使用getElementsByClassName或querySelectorAll遍历集合操作。

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