为什么 getElementsByClassName() 不起作用？

问题描述 投票：0回答：1

我正在上 JavaScript 基础课程，但从第一分钟起我就无法跟上。这种语言对我来说毫无意义。我懂 HTML 和 CSS，但 JS 对我来说毫无意义。

我正在尝试边做边学，但我什至无法通过第一行代码。这是我所拥有的：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>
    
</head>
    
<body>
  
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>

</body>
</html>

/* CSS SHEET */
@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

// JAVASCRIPT //

function btnStyle(){
    
    document.getElementsByClassName("btn").style.width="120px";
    
}

我想做的就是将所有“btn”类的按钮更改为宽度 120px。以我有限的理解，这应该可行。我不需要其他方法来完成此任务。我想要解释为什么这不起作用。

javascript getelementsbyclassname
1个回答
-2
投票

为什么不起作用

getElementsByClassName()
返回一个 HTMLCollection，而不是一个元素。您无法在 HTMLCollection 上设置样式属性，因此您的代码将无法工作。

如何做 HTMLCollection 有一个 

length
属性，可以告诉您有多少个元素。它还有一个 
item()
方法，可以按编号检索元素。

使用这些我们可以创建一个循环来循环遍历元素并设置每个元素的样式。

let els = document.getElementsByClassName('btn');
for(let i=0;i<els.length;i++) {
  els.item(i).style.width="120px";
}


let els = document.getElementsByClassName('btn');
for(let i=0;i<els.length;i++) {
  els.item(i).style.width="240px";
}
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
        
</head>
    
<body>
  
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>

</body>
</html>

参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.