如何获取柔性盒中一行的高度

Question

如何获取flexbox中一行的高度如果我有一个flexbox容器，并且在该容器中，有3个不同的行，是否可以使用javascript来检索每行的高度，例如，如果我想获取flexbox中第二行的高度？

Answer 1

您可以通过创建一个具有相同类的所有元素的array来实现这一点，然后使用forEach可以获得所有这些元素的高度。例如：

let arrayName = document.querySelectorAll(".your-row"); 
//gets every single element that has the your-row class.
arrayName.forEach(element => console.log(element.clientHeight));
/* loops through the element and for each element it prints the height to the console 
including padding but NOT the horizontal scrollbar height, border, or margin. */

例如，如果你想获得第二个元素的高度，你只需要使用相同的数组，并指定你想得到第二个。例如：

let arrayName = document.querySelectorAll(".your-row"); 
//Getting all elements again.
console.log(arrayName[1].clientHeight);
// Log the 2nd elements height into the console.