时间戳

首页 > 解决方案 > 为什么我的 javascript 会抛出“无法读取 null 的属性样式”？

javascript - 为什么我的 javascript 会抛出“无法读取 null 的属性样式”？

问题描述

下面是相关的javascript代码。我将正确的值传递给方法，该方法用于 document.getElementById(tabName).style.display = 'block' 行（错误所在）。我创建了新的 ID 元素，并且正在传递它。我不明白。

有错误的行：document.getElementById(tabName).style.display = 'block'; 它在最后。

感谢您的帮助，我有点新，可能无法完全理解其中的复杂部分。我真的可以使用帮助。

function addTab() {

  //create a new div element
  const newDiv = document.createElement('div');

  //create the id and add tab content class
  newDiv.id = "newtab"; //sets id name for div
  newDiv.classList.add("tablinks"); //sets class for div

  //give tab some text
  const tabContent = document.createTextNode("Testing the add tab button!");
  newDiv.appendChild(tabContent);

  //create the tab
  var btn = document.createElement("button"); //creates button
  btn.className = "tablinks"; //sets class for button

  //give onclick event to button
  var event = Event;
  btn.onclick = openTab(event, 'newtab');
  document.getElementByClassName("tab").appendChild(btn);

  //add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("addnewtab");
  document.body.insertBefore(newDiv, currentDiv);
}

/* RECENT 10-K NOTIFICATION FEED START */
function openTab(evt, tabName) {

  var i, tablinks;
  let tabcontent = document.getElementsByClassName("tabcontent");

  for (let tab of tabcontent) {
    tab.style.display = "none";
  }

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");



  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = 'block';
  evt.currentTarget.className += " active";

}

标签： javascripthtmlcsserror-handling

解决方案

您看到的错误“无法读取 null 的属性样式”意味着它正在尝试访问style由document.getElementById(tabName).

如果未找到此元素（返回 null），那么您将看到您所拥有的错误消息。

为避免该错误，我建议在访问style属性之前添加类型保护：

let tabEl = document.getElementById(tabName);
if (tabEl) {
  tablEl.style.display = 'block';
}

推荐阅读