将类名传递给函数参数

Question

我正在处理这部分代码：<div class="tabs-buttons-container">            <button class="tabs-button" onclick="openTabs(event, 'test11', 'red')">Tab 1</button>            <button class="tabs-button" onclick="openTabs(event, 'test12')">Tab 2</button>            <button class="tabs-button" onclick="openTabs(event, 'test13')">Tab 3</button>            <span class="test"></span>            <span class="red"></span>            <span class="white"></span>        </div>const openTabs = (event, tab, test) => {    let i, tabContent, tabButton;    tabContent = document.getElementsByClassName("tabs-content")    for (i = 0; i < tabContent.length; i++) {        tabContent[i].style.display = "none";    }    document.getElementById(tab).style.display = "block";    document.getElementsByClassName(test).style.display = "block";}我当前的目标是将“red”类传递到函数中并更改 span 元素的显示。当我使用 ID 时，它工作正常，但当我想传递类时，结果为 null。是否可以在 JS 函数中动态传递类名？

Answer 1

getElementsByClassName返回一个集合，因此您需要遍历每个元素来分配样式。您还可以使用querySelector("." + className)它仅返回第一个匹配的元素。

Answer 2

var red = document.getElementByClassName('red')[0];