JavaScript：最大高度：NaN

Question

在我们 Shopify 网站的 collection 页面中，由于产品标题的长度可变，每个产品卡中的查看详细信息按钮都未对齐。为了对齐它们，我们决定使用纯 JavaScript 将一行中所有产品卡的产品标题 min-height 设置为同一行三个中最高的。以下是实现此目的的完整逻辑。

逻辑：

查找“.card__info”的所有选择器
设置每行的卡片数量，根据window.innerWidth
设置最大高度 = 0;
foreach card__info 选择器，执行以下命令：
- 获取card__title
- 获取高度。
- 设置最大高度 = 最大（max_height，新高度）
foreach card__info 选择器，执行以下命令：
- 获取card__title
- 将 min-height 设置为最大值。

理想-去做row-wise window.innerWidth 768px 及以上 - 3 列否则 2 列

下面的代码只是解决方案的第一部分。我在控制台中得到的输出是 Max Height: NaN 而不是实际高度，因为下面链接的 collection 页面中有 15 个产品及其标题。

JavaScript代码：

//  Find All selectors of ".card__info"
let allCardInfo = document.querySelectorAll(".card__info");
//  Set number of cards per row, to check based on window.innerWidth
var numCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2);
var maxHeight = 0; //  Set max height = 0;
//  Foreach card__info selector, execute the following:
allCardInfo.forEach(element => {
  let cardTitle = element.querySelector(".card__title");   // Get the card__title
  let cardTitleHeight = cardTitle.height;   // Get the height.
  // Set max height = max (max_height, new height)
  maxHeight = Math.max(maxHeight, cardTitleHeight);
  console.log('Max Height: ' + maxHeight);
});

Answer 1

.height 不是 JS 中 html 个元素的属性，所以你可以使用

getComputedStyle(element)[0].height 而不是那个，

getComputedStyle 是 window 对象的一个很好的方法，可以帮助您获取元素的所有样式（无论它们是内联的、内部的还是外部的）

我还测试了@James 在关于

的评论中所说的内容

let cardTitleHeight = cardTitle.clientHeight;

它也有效...

你也可以使用 element.getClientRects 来获取元素的高度

JavaScript：最大高度：NaN

JavaScript: Max Height: NaN

html

javascript

jquery

frontend

dhtml