如果元素具有特定类，如何更改 onclick 属性的值？

Question

如果元素有一个active class，我正在寻找解决方案，它可以将onclick值更改为“closeSideBar”吗？

function openSidebar() {
  document.getElementById('sidebar').style.width = '250px';
  document.getElementById('hamburger').style.marginLeft = '250px'
}

function closeSideBar() {
  document.getElementById('sidebar').style.width = '0';
  document.getElementById('hamburger').style.marginLeft = '0'
}

<button id="hamburger" onclick="openSidebar()">

我正在寻找如何实现此结果的解决方案？

<button id="hamburger" onclick="closeSideBar()" class="active">

Answer 1

您不想更改属性值。您只想调用一个函数并指导其行为。

而不是单独的打开/关闭功能，使用一个：

function toggleSidebar(el) {
    if (el.classList.contains('active')) {
        document.getElementById('sidebar').style.width = '0';
        document.getElementById('hamburger').style.marginLeft = '0'
    } else {
        document.getElementById('sidebar').style.width = '250px';
        document.getElementById('hamburger').style.marginLeft = '250px'
    }
}

然后调用函数，传递元素：

<button id="hamburger" onclick="toggleSidebar(this)" class="active">

提示：不要直接操作样式。相反，切换类，以便您可以在样式表中的一个地方更改侧边栏的大小和位置：

function toggleSidebar(el) {
    if (el.classList.contains('active')) {
        document.body.classList.remove('sidebar-in');
    } else {
        document.body.classList.add('sidebar-in');
    }
}

现在您可以使用后代选择器设置样式：

body .sidebar { ... }
body.sidebar-in .sidebar { ... }