OnClick使用纯JavaScript通知栏隐藏分区

onclick 是一个 HTML 事件处理器，用于在用户点击某个元素时触发 JavaScript 函数。如果你想要使用纯 JavaScript 来控制一个通知栏的显示与隐藏，可以通过修改元素的 CSS 属性 display 来实现。

基础概念

HTML 事件处理器：如 onclick，允许在特定事件发生时执行 JavaScript 代码。
JavaScript DOM 操作：通过 JavaScript 来操作 HTML 文档对象模型（DOM），实现对页面元素的动态修改。

类型与应用场景

类型：事件驱动的交互。
应用场景：适用于任何需要用户交互的场景，如弹出提示、隐藏/显示元素等。

示例代码

以下是一个简单的示例，展示了如何使用 onclick 事件和纯 JavaScript 来控制一个通知栏的隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification Bar Example</title>
<style>
  #notificationBar {
    background-color: #f44336;
    color: white;
    padding: 15px;
    text-align: center;
    display: block; /* 默认显示 */
  }
</style>
</head>
<body>

<div id="notificationBar">
  这是一个通知栏！
  <button onclick="hideNotification()">隐藏</button>
</div>

<script>
function hideNotification() {
  var notificationBar = document.getElementById('notificationBar');
  if (notificationBar.style.display === 'none') {
    notificationBar.style.display = 'block'; // 显示通知栏
  } else {
    notificationBar.style.display = 'none'; // 隐藏通知栏
  }
}
</script>

</body>
</html>