Javascript 将获取错误中的样式设置为'；宽度'；未定义的

我正在做我的react项目来创建侧导航栏

所以我有这个按钮，点击这个按钮，导航栏应该打开

<button className="openbtn" onClick={(e) => openNav(e)}>&#9776; Open Sidebar</button>

当我这样做的时候，我得到了这个错误

Uncaught TypeError: Cannot set property 'width' of undefined

我的sidenav样式看起来像

 .sidenav {
     margin-top: 50px;
    height:100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 20px;
    font-size: 15px;
  }

在css文件中，sidenav和test都具有width属性

那么如何解决这个问题呢

---

这在普通的html/css/javascript中工作。如何在react中执行此操作？

使用

getElementsByClassName（）

，您指的是集合。将数组中的第一个数字指定为[0]。请尝试以下代码：

function openNav() {
    console.log("open nav")
    document.getElementsByClassName("sidenav")[0].style.width = "250px";
    document.getElementsByClassName("test")[0].style.marginLeft = "250px";
}

---

使用

getElementsByClassName（）

，可以引用集合。将数组中的第一个数字指定为[0]。请尝试以下代码：

function openNav() {
    console.log("open nav")
    document.getElementsByClassName("sidenav")[0].style.width = "250px";
    document.getElementsByClassName("test")[0].style.marginLeft = "250px";
}

---

document.getElementsByClassName（“sidenav”）

是

HTMLCollection

。您需要对每个元素进行迭代，并为它们指定样式

let sideNav = document.getElementsByClassName("sidenav")
for(let i = 0; i < sideNav.length; i++)
   sideNav[i].style.width = "250px"

let sideNav=document.getElementsByClassName（“sideNav”）
for（设i=0；i

文档。GetElementsByCassName（“sidenav”）

是

HTMLCollection

。您需要对每个元素进行迭代，并为它们指定样式

let sideNav = document.getElementsByClassName("sidenav")
for(let i = 0; i < sideNav.length; i++)
   sideNav[i].style.width = "250px"

let sideNav=document.getElementsByClassName（“sideNav”）
for（设i=0；i

document.getElementsByClassName

返回多个元素。所以，你不能只写

.style.width`。相反，您需要运行循环

const navEl=document.getElementsByClassName（“sidenav”）
对于（变量i=0；i

或者你只对一个元素感兴趣

document.getElementsByClassName（“sidenav”）[0]。style.width=“250px”

---

最后，您将问题输入为

getelementsbyclassname（“test”）

。在

ClassName

文档之后添加一个

d

。getElementsByClassName

返回多个元素。所以，你不能只写

.style.width`。相反，您需要运行循环

const navEl=document.getElementsByClassName（“sidenav”）
对于（变量i=0；i

或者你只对一个元素感兴趣

document.getElementsByClassName（“sidenav”）[0]。style.width=“250px”

---

最后，您将问题输入为

getelementsbyclassname（“test”）

。在

ClassName

之后添加一个

d

，您真的不应该像这样在React中进行直接的DOM操作，但是您可以包含分配了

sidenav

类的组件吗

document.getElementsByClassName（“sidenav”）

我认为应该返回一个具有该类名的元素数组。您真的不应该像这样在React中进行直接DOM操作，但是您可以包含分配了

sidenav

类的组件吗

document.getElementsByClassName（“sidenav”）

我认为应该返回一个具有该类名的元素数组。这是输入错误sorry@bad_coder9042093，不用担心。我们有时都会打错字。这很有效。谢谢！！那是打字错误sorry@bad_coder9042093，不用担心。我们有时都会打错字。这很有效。谢谢！！我的错！！！行了，谢谢！！我的错！！！行了，谢谢！！行了，谢谢！！行了，谢谢！！