Не удается изменить стиль элемента в результатах querySelectorAll

#html #typescript #dom #dom-manipulation

#HTML #typescript #dom #dom-манипуляция

Вопрос:

Я пытаюсь отредактировать стиль div на странице, чтобы скрыть его. Я могу сделать что-то вроде этого

   let mainPanelFirstChild = document.getElementById("jp-main-content-panel")
    .children[0];
  (mainPanelFirstChild as HTMLElement).style.display = "none";

с элементами, которые имеют атрибуты id, но элемент, который я хочу скрыть, не имеет атрибута id.

Вот код, который работает не так, как ожидалось:

     const closeIconNodeList = document.querySelectorAll(
      ".p-TabBar-tabCloseIcon"
    );
    closeIconNodeList.forEach((node) => {
      console.log(node);
      (node as HTMLElement).style.display = "none";
    });

console.log показывает элемент так, как я ожидал, однако изменение style.display атрибута ничего не дает. Я попытался выполнить цикл document.querySelectorAll с помощью обычного цикла for для прямого обращения к элементам. Это тоже ничего не дало.

1. Возвращаюсь к некоторым моим старым ответам. @wes — если это помогло решить вашу проблему, не могли бы вы отметить этот ответ правильным, щелкнув галочку? Это поможет другим, у кого возникнут подобные проблемы в будущем. — Счастливого кодирования!

Ответ №1:

Я использовал часть вашего кода для создания рабочего фрагмента того, что вы, возможно, пытаетесь выполнить.

РЕДАКТИРОВАТЬ: обновленный фрагмент для использования цикла вместо

 //if you choose to use querySelectorAll then you must either target a specific element or loop through the available elements that you want to target with class ".p-TabBar-tabCloseIcon"

//if you are only targeting one element then use document.querySelector instead

//here we will use querySelectorAll like in your example
var closeIconNodeList = document.querySelectorAll(".p-TabBar-tabCloseIcon");

//below I have created a loop to check the amount of elements in the array that is output using querySelectorAll

//the hideMe function will hide all elements in the array that use class "p-Tabbar-tabCloseIcon" 
const hideMe = function() {
for (var x = 0; x < closeIconNodeList.length; x  )
    closeIconNodeList[x].style.display = 'none';
 };

 <div class="p-TabBar-tabCloseIcon">Hide me</div>
<div class="p-TabBar-tabCloseIcon">Hide me 2</div>
<div class="p-TabBar-tabCloseIcon">Hide me 3</div>
<button onclick="hideMe();">Click To Hide</button>