如何替换普通 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 = 

 document.getElementById('default-sidenav-menu').className.replace("something", "something_new");