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

我正在寻找一个解决方案，如果元素有一个

活动的
类
，它能将
onclick
值更改为“closeSideBar”吗


函数openSidebar（）{
document.getElementById（'sidebar'）.style.width='250px'；
document.getElementById（'hamburger'）.style.marginLeft='250px'
}
函数closeSideBar（）{
document.getElementById（'sidebar'）.style.width='0'；
document.getElementById（'hamburger'）。style.marginLeft='0'
}
您不想更改属性值。您只需要调用一个函数并指导其行为

使用以下功能代替单独的打开/关闭功能：

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">

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

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

我想您只需要一个函数
切换边栏

函数切换边栏（）{
const isActive=document.getElementById（'hamburger'）.classList.contains（'active'）；
如果（isActive）{
closeSideBar（）；
}否则{
openSidebar（）；
}
}
函数openSidebar（）{
document.getElementById（'sidebar'）.style.width='250px'；
document.getElementById（'hamburger'）.style.marginLeft='250px'；
}
函数closeSideBar（）{
document.getElementById（'sidebar'）.style.width='0'；
document.getElementById（'hamburger'）.style.marginLeft='0'；
}
您可以实现这一点，但这是一种反模式。首先，让我描述一下您是如何做到这一点的：

function hamburger(active) {
    var myHamburger = document.getElementById("hamburger");
    myHamburger.classList[active ? "add" : "remove"]("active");
    myHamburger.onclick = (active ? "open" : "close") + "Sidebar()";
}

现在，您已经了解了它的工作原理，请看一看更优雅的解决方案：

function openClose(item) {
    if (item.classList.contains("active"))  openSidebar();
    else closeSidebar();
}

并在标签中使用此选项：

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

尽管没有要求提供替代解决方案，但考虑仅CSS的解决方案并不值得，例如：


html，正文{高度：100%；宽度：100%；}
正文{overflow-x:hidden；padding:40px；background:rgb（180200220）；}
/*#导航触发器是一个隐藏输入*/
#导航触发器{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
可见性：隐藏；
}
/*导航本身（默认情况下为屏幕外）*/
#导航{
宽度：300px；
最大宽度：80%；
身高：100%；
位置：绝对位置；
排名：0；
左：-300px；
底部：0；
z指数：10；
列表样式：无；
背景：#111；
}
#导航标签{
宽度：30px；
高度：30px；
显示：块；
位置：绝对位置；
顶部：30px；
右：-60px；
颜色：#000；
字体大小：30px；
线高：30px；
字体大小：粗体；
光标：指针；
}
#导航ul{
保证金：0；
填充：10px；
显示：块；
位置：相对位置；
身高：100%；
排名：0；
右：0；
溢出：自动；
}
#导航ula{color:#ffffff；}
/*为过渡设置动画*/
#导航{
-webkit转换：右0.2s，左0.2s，边距0.2s，背景0.2s；
过渡：右0.2s，左0.2s，边距0.2s，背景0.2s；
}
/*如果导航触发器被选中，则移动*/
#导航触发器：已选中~#导航{
位置：固定；
左：0；
}

☰






假设IE不是一个问题，您可以使用
myHamburger.classList.toggle（“活动”）
<button id="hamburger" onclick="openClose()">