js 获取 相同类名 高度
时间: 2023-09-10 11:01:56 浏览: 66
当需要获取相同类名元素的高度时,可以使用JavaScript中的querySelectorAll函数来选择所有指定的类名元素,然后遍历这些元素,分别获取它们的高度。以下是使用JavaScript实现的代码示例:
```javascript
// 获取类名为"example-class"的所有元素
var elements = document.querySelectorAll('.example-class');
// 定义一个数组来保存所有元素的高度
var heights = [];
// 遍历所有元素,获取它们的高度并添加到数组中
for (var i = 0; i < elements.length; i++) {
var elementHeight = elements[i].offsetHeight; // 获取元素的高度
heights.push(elementHeight); // 将高度添加到数组中
}
// 打印所有元素的高度
console.log(heights);
```
在上面的代码中,首先使用querySelectorAll函数选择所有类名为"example-class"的元素。然后使用一个循环遍历所有选中的元素,通过offsetHeight属性获取每个元素的高度,并将这个高度添加到一个数组中。最后,使用console.log函数打印出所有元素的高度。
相关问题
js根据类名获取元素高度
你可以使用 `document.getElementsByClassName` 方法获取指定类名的所有元素,然后遍历这些元素获取它们的高度。具体步骤如下:
1. 使用 `document.getElementsByClassName` 方法获取指定类名的所有元素,如 `let elements = document.getElementsByClassName("my-class")`。
2. 遍历这些元素,使用 `element.offsetHeight` 获取每个元素的高度。
完整代码示例:
```html
<div class="my-class">元素1</div>
<div class="my-class">元素2</div>
<div class="my-class">元素3</div>
<div class="my-class">元素4</div>
```
```js
let elements = document.getElementsByClassName("my-class");
for (let i = 0; i < elements.length; i++) {
let height = elements[i].offsetHeight;
console.log(`元素 ${i+1} 的高度是 ${height}px`);
}
```
输出结果:
```
元素 1 的高度是 50px
元素 2 的高度是 60px
元素 3 的高度是 70px
元素 4 的高度是 80px
```
需要注意的是,`getElementsByClassName` 方法返回的是一个 HTMLCollection 对象,它类似于数组,可以使用下标访问其中的元素。但是,HTMLCollection 对象不是一个真正的数组,不能使用数组的方法,例如 `forEach` 方法。如果需要使用数组的方法,可以将 HTMLCollection 对象转换为数组,例如 `Array.from(elements)`。
js获取class类名节点
您可以使用JavaScript中的`document.getElementsByClassName()`方法获取class类名节点。该方法返回一个节点列表,其中包含所有具有指定类名的元素。例如,如果您要获取所有具有类名“example”的元素,您可以使用以下代码:
```javascript
var elements = document.getElementsByClassName("example");
```
此代码将返回一个NodeList对象,其中包含所有具有类名“example”的元素。您可以通过遍历该NodeList对象来访问它们。