WordPress点击按钮切换板块报Uncaught TypeError读取style属性错误怎么解决

报错根因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'style')错误，本质是document.getElementById()执行时没有找到对应ID的DOM元素，返回了null，后续尝试访问null的style属性就触发了该报错。 #

具体排查点与修复方式 #

• 检查是否缺失对应内容板块DOM
  你当前贴出的HTML仅包含按钮元素，没有ID为vermelho、laranja、amarelo、verde的四个内容板块元素，请补充对应板块结构，示例：

<div id="vermelho">红色板块内容</div>
<div id="laranja">橙色板块内容</div>
<div id="amarelo">黄色板块内容</div>
<div id="verde">绿色板块内容</div>

• 调整JS执行时机
  WordPress主题默认常将JS放在<head>中加载，此时页面DOM还未完成渲染，直接执行获取元素的逻辑会拿不到节点。你可以选择以下任意一种方式解决：
  1. 将JS代码放在页面</body>结束标签之前引入
  2. 用DOMContentLoaded事件包裹所有JS逻辑，确保DOM加载完成后再执行，同时增加容错判断避免极端情况报错：

document.addEventListener('DOMContentLoaded', function() {
  /* 获取板块元素 */
  var vermelho = document.getElementById("vermelho");
  var laranja = document.getElementById("laranja");
  var amarelo = document.getElementById("amarelo");
  var verde = document.getElementById("verde");
  
  window.trocaVermelho = function(){
    // 元素不存在直接返回，避免报错
    if (!vermelho || !laranja || !amarelo || !verde) return
    if (vermelho.style.display === "none") {
      vermelho.style.display = "block";
      laranja.style.display = "none";
      amarelo.style.display = "none";
      verde.style.display = "none";
    } else{
      vermelho.style.display = "block";
    }
  }
  function trocaLaranja(){
    if (!vermelho || !laranja || !amarelo || !verde) return
    if (laranja.style.display === "none") {
      vermelho.style.display = "none";
      laranja.style.display = "block";
      amarelo.style.display = "none";
      verde.style.display = "none";
    } else {
      laranja.style.display = "block";
    }
  }
  function trocaAmarelo(){
    if (!vermelho || !laranja || !amarelo || !verde) return
    if (amarelo.style.display === "none") {
      vermelho.style.display = "none";
      laranja.style.display = "none";
      amarelo.style.display = "block";
      verde.style.display = "none";
    } else {
      amarelo.style.display = "block";
    }
  }
  // 原有trocaVerde逻辑不符合需求，修正为和其他函数一致的逻辑
  function trocaVerde(){
    if (!vermelho || !laranja || !amarelo || !verde) return
    if (verde.style.display === "none") {
      vermelho.style.display = "none";
      laranja.style.display = "none";
      amarelo.style.display = "none";
      verde.style.display = "block";
    } else {
      verde.style.display = "block";
    }
  }
})

简化优化方案（可选） #

你可以不用写4个重复的交互函数，通过自定义属性简化代码，后续新增板块也不需要修改JS逻辑：

1. 修改按钮HTML：

<ul>
  <li><button class="color-switch-btn" data-target="vermelho">红色</button></li>
  <li><button class="color-switch-btn" data-target="laranja">橙色</button></li>
  <li><button class="color-switch-btn" data-target="amarelo">黄色</button></li>
  <li><button class="color-switch-btn" data-target="verde">绿色</button></li>
</ul>

2. 给四个内容板块统一加类名color-panel：

<div class="color-panel" id="vermelho">红色板块内容</div>
<div class="color-panel" id="laranja">橙色板块内容</div>
<div class="color-panel" id="amarelo">黄色板块内容</div>
<div class="color-panel" id="verde">绿色板块内容</div>

3. 替换原有JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const switchBtns = document.querySelectorAll('.color-switch-btn')
  const colorPanels = document.querySelectorAll('.color-panel')
  switchBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetId = this.dataset.target
      const targetPanel = document.getElementById(targetId)
      // 隐藏所有板块
      colorPanels.forEach(panel => panel.style.display = 'none')
      // 仅显示目标板块
      if (targetPanel) targetPanel.style.display = 'block'
    })
  })
})

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