📅 最后修改于: 2023-12-03 15:30:53.918000 🧑 作者: Mango
getElementsByClassName是Javascript中一个非常常用的方法，它可以根据元素的类名返回一个由元素组成的集合。
style.display是一个CSS属性，用于设置一个元素的显示方式。当该属性的值为“none”时，该元素将被隐藏。
结合起来，getElementsByClassName.style.display可以用于选择多个元素，并控制它们的显示方式。
elementList = document.getElementsByClassName(classValues);
其中，classValues为一个或多个类名，多个类名用空格分隔。
element.style.display = value;
其中，value为CSS中display属性的一个合法值。
<!DOCTYPE html>
<html>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<button onclick="hideBoxes()">Hide Boxes</button>
<script>
function hideBoxes() {
var boxes = document.getElementsByClassName("box");
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.display = "none";
}
}
</script>
</body>
</html>
此示例将定义一个hideBoxes()函数，该函数使用getElementsByClassName选择所有类名为“box”的元素。随后，它遍历所有元素，并将它们的style.display属性设置为“none”，以隐藏这些元素。函数可以通过一个按钮进行触发。
getElementsByClassName.style.display是一种非常有用的Javascript技巧，可以根据元素的类名选择多个元素，并控制它们的显示方式。该技巧在开发动态Web应用时特别有用。