使用Javascript在多个位置应用类 出身背景

我正在做一个项目，其中包括一个用于导航的抽屉。单击切换“导航抽屉切换”时，会打开抽屉并将主体移动抽屉的宽度

问题 但是，我还想将“navigating”类应用于有标记的页脚和有标记的页眉。我曾尝试添加getElementsByTagName'footer'和getElementsByTagName'nav'，但显然操作不当。如何正确地让这些与当前正在工作的getElementById'body'一起工作

使现代化 现在页脚可以工作了，但页眉仍然保持不变。以下是更新的代码：

var checkbox = document.getElementById('nav-drawer-toggle');
  var dashboard_body = document.getElementById('body');
  var dashboard_header = document.getElementsByTagName('nav')[0];
  var dashboard_footer = document.getElementsByTagName('footer')[0];
  checkbox.onchange = function() {
     if(this.checked) {
       dashboard_body.className += 'navigating',
       dashboard_header.className += 'navigating',
       dashboard_footer.className += 'navigating';
     } else {
       dashboard_body.className = '',
       dashboard_header.className = '',
       dashboard_footer.className = '';
     }
  };

---

同样，您可以为其他每个容器提供一个ID，如footer和navbar，并使用与上面相同的代码

var dashboard_body = document.getElementById('body');
var dashboard_navbar = document.getElementById('navbar');
var dashboard_footer = document.getElementById('footer');

虽然上面的内容很重复，但应该能满足您的需要。您可以将这些对象保存到数组中，然后在数组中循环，这将为您节省几行代码

出于完整性和个人偏好的考虑，如果您不反对使用jQuery，我会说这在jQuery中更容易实现。如果是这样的话，就很容易做到：

if (this.checked) {
    $(".your-class-name").addClass("navigating");
} else {
    $(".your-class-name").removeClass("navigating");
}

---

在上面的jQuery示例中，您的类名将替换为CSS类名，您可以将其应用于受导航类影响的元素。请记住，您可以使用多个由您可能已经知道的空格分隔的类名，例如：class=my class cool class导航

这一切都取决于您的html。我猜您可能遇到了一个问题，getElementsByTagName和GetElementsByCassName都返回HTMLCollection，而不是单个元素节点。因此，如果只有一个，可以使用getElementsByTagName'footer'[0]获取该页脚以将类放在其上

您将向函数部分添加什么以与新变量相对应？在您的jQuery示例中，如何将其附加到充当切换的nav抽屉切换？谢谢谢谢你，彼得。奇怪的是，页脚现在可以工作了，但是页眉仍然有问题。我已经相应地更新了原始问题和代码片段以反映这一点。没问题。在你编辑之前，你提到过你的导航已经有一个类了吗？如果是这样，当您向其中添加导航类时，您使用的是+=且前面没有空格，因此类名现在将是origClassNamenavigating，而不是origClassName navigating；但是请记住，当您取消选中该框时，除了导航之外，您还将丢失原始类名。另外，我刚刚注意到您在一些语句后使用逗号。在本例中，它可以正常工作，但逗号在javascript中有特定的含义，因此您可能只需要使用分号。