如何使用控制台设置不显示 <footer> 标签？答案

【问题标题】：How To Set Display None of <footer> tag with Console?如何使用控制台设置不显示 <footer> 标签？
【发布时间】：2022-06-28 22:30:02
【问题描述】：

我正在尝试使用 javascript 隐藏网站上的某些字段。为此，我使用相关浏览器的控制台，并在此将字段 display = "none"; 设为 ClassName 或 ID，但是我做了一些尝试来进一步改进这些东西。

在这些实验中，我只找到了一个带有<footer>标签的字段，但它既没有ClassName也没有ID。

document.getElementsByClassName("footer")[0].style.display = "none";

如何使用 js 代码使其不可见？如果您能回复我，非常感谢。我正在努力学习新东西。

【问题讨论】：

document.querySelector() 是您需要使用的那个！它还可以用于使用# 选择ids 或使用. 的类（基本上是为选择器插入CSS 语法）等等（>、[space]、~ ，+，以及任何其他复杂场景）developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

【解决方案1】：

您可以使用document.querySelector() 函数。这允许您指定任何有效的 CSS 选择器，这意味着在这种情况下您可以使用元素的标记类型来识别它。

演示：

document.querySelector("footer").style.display = "none";

<div>Another div</div>
<footer>Hello</footer>

代码将通过隐藏页脚元素来删除现有的“Hello”消息。仍然显示的是“另一个 div”。

【讨论】：

【解决方案2】：

您已经可以在 CSS 中创建一个带有样式 display: none; 的类。然后在页脚添加或附加该类，

let element = document.querySelector(".footer");

 function hideFooter() {
  element.classList.add("hide");
 }

.hide {
  display: none;
}

<footer class="footer">
<!-- footer code -->
<p>This Is Footer </p>
</footer>

<button onClick="hideFooter()"> Hide Footer </button>

【讨论】：