如何替换普通 JS 上的 className？

Question

如何将类名（列表）替换为 Javascript？我有这个代码：

document.addEventListener("DOMContentLoaded", (e) => {

    const url = window.location;

    let urlReq = url.href;

    if(urlReq.includes('/home')){

        document.getElementById('default-sidenav-menu').className.replace('sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark', 'sidenav-main nav-collapsed nav-collapsible  sidenav-active-rounded  sidenav-dark');

        console.log(document.getElementById('default-sidenav-menu').className);

    }

});

这是我的html：

<aside class="sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark" id="default-sidenav-menu">

    <div class="brand-sidebar">

    ...

</aside>

但我仍然得到默认的 className:sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark当我的页面加载时。

我犯了什么错误？

Answer 1

您不需要替换，只需将字符串类分配给属性即可className：Element 接口的propertyclassName获取和设置指定元素的类属性的值。句法：elementNodeReference.className = cName;在哪里：cName是一个字符串变量，表示当前元素的类或空格分隔的类。演示：document.addEventListener("DOMContentLoaded", (e) => {  // other code  document.getElementById('default-sidenav-menu').className = 'sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark', 'sidenav-main nav-collapsed nav-collapsible  sidenav-active-rounded  sidenav-dark';  console.log(document.getElementById('default-sidenav-menu').className);  // other code});<aside class="nav-lock nav-collapsible" id="default-sidenav-menu">    <div class="brand-sidebar">    </div></aside>

Answer 2

document.getElementById('default-sidenav-menu').className.replace这意味着您要用另一个字符串替换该字符串，因为“className”在您获取时只是一个字符串。document.body.className.constructor.name=> "String"如果你想替换它，那么你应该像这样分配新的类名。document.getElementById('default-sidenav-menu').className =&nbsp;&nbsp;document.getElementById('default-sidenav-menu').className.replace("something", "something_new");