如何替换 vanilla JS 上的 className？

Question

如何将 className (List) 替换为 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 接口的className属性获取和设置指定元素的 class 属性的值。

句法：

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 = 
 document.getElementById('default-sidenav-menu').className.replace("something", "something_new");