Question

背景

我正在开发一个包含导航抽屉的项目。单击切换（'nav-drawer-toggle'）时，它会打开抽屉并将主体移过抽屉的宽度。

问题

但是，我还想将“导航”类应用于我的页脚（具有<footer>标记）和我的标题（具有<nav>标记）。我已尝试添加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 = '';
     }
  };

Answer 1

您同样可以为每个其他容器提供一个ID，例如＆＃34;页脚＆＃34;和＆＃34; navbar＆＃34;，并使用您在上面执行的相同代码。

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

上述内容非常重复，但应该能满足您的需求。您可以将这些对象保存到数组中，然后循环遍历数组，这将为您节省几行代码。

为了完整性（和个人偏好），我会说如果你不反对使用它，这在jQuery中更容易实现。如果是这样，那将很容易：

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

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

Answer 2

一切都取决于你的HTML。我猜你可能遇到问题getElementsByTagName和getElementsByClassName都返回HTMLCollection而不是单个元素节点。因此，如果您只有一个<footer>，则可以使用getElementsByTagName('footer')[0]来获取该页脚。

使用Javascript在多个地方应用一个类

背景

问题

更新

2 个答案: