使用javascript使用2个标识符改变元素的宽度

Changing width of element using javascript using 2 Identifiers

本文关键字：使用 元素 改变 javascript 2个 标识符      更新时间：2023-09-26

我在W3Schools上查看一个侧边导航栏的例子，很难理解Javascript是如何实现的。js意味着通过点击按钮打开侧边导航菜单。在下面的代码中，为什么需要将id mySidenav添加到菜单div中?我认为通过getElementsByClassName类sidenav瞄准div是有意义的，但这没有任何作用。有人能解释一下为什么需要id吗?我会感谢任何帮助，因为我学习js。

这是菜单的基本html: 
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
下面是菜单的CSS: 
.sidenav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #111;
   overflow-x: hidden;
   transition: 0.5s;
   padding-top: 60px;
 }

和JS: 

function openNav() {
   document.getElementById("mySidenav").style.width = "250px";
}

当你有像菜单这样的东西，每个页面上只有一个，你应该坚持使用ID。确保ID只匹配一次。如果您有多个行为相同的元素，则应该按类进行匹配。但是，如果您想按类匹配，我假设您尝试使用getElementsByClassName("sidenav")。在这种情况下，您必须指定要获得哪个匹配，因为它将返回一个数组。正确的语法应该是getElementsByClassName("sidenav")[0]

我尝试在Tryit编辑器中更改它并将该行更改为

document.getElementsByClassName("sidenav")[0].style.width = "250px";

，它成功了。在这种情况下，您是否忘记在获取数组时使用索引?

两个选择器都可以，但是根据id选择元素更快。

在jQuery中，通过类或id选择比通过其他属性选择更快吗?
尽管这个问题是关于jquery的，但如果可用的话，jquery会使用本地浏览器选择器(getElementById或getElementsByClassName)
相关文章：