JavaScript 通过class获取元素并设置高|极客笔记

JavaScript 通过class获取元素并设置高

在网页开发中，经常会遇到需要通过class获取元素并对其进行操作的情况。本文将详细介绍如何使用JavaScript来通过class获取元素并设置其高度。

1. 通过class获取元素

在JavaScript中，使用document.getElementsByClassName()可以获取所有具有指定class名称的元素。这个方法将返回一个元素对象的数组。

// 获取具有相同class名称的所有元素
var elements = document.getElementsByClassName("example-class");

如果只想获取第一个具有指定class名称的元素，可以使用document.querySelector()方法。

// 获取第一个具有相同class名称的元素
var element = document.querySelector(".example-class");

2. 设置元素高度

获取到需要操作的元素后，就可以通过设置其style.height属性来改变其高度。

// 设置元素高度为200px
element.style.height = "200px";

示例代码

假设有如下HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Element Height</title>
    <style>
        .example-class {
            background-color: lightblue;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="example-class">Element 1</div>
    <div class="example-class">Element 2</div>
    <div class="example-class">Element 3</div>
</body>
</html>

通过以下JavaScript代码，我们可以将所有具有example-class类名的元素高度设置为200px：

var elements = document.getElementsByClassName("example-class");

for (var i = 0; i < elements.length; i++) {
    elements[i].style.height = "200px";
}

在浏览器中打开这个页面，就可以看到所有具有example-class类名的元素高度都被设置为200px。