javascript - 如何从纯javascript获取div的最长高度?

标签 javascript arrays

我正在努力实现可以通过 jQuery 实现的目标,但我正在避免使用 jQuery 来学习 javascript。我正在尝试从 .map 中获取最大的数字。这是我到目前为止所做的。

function equalHeight(className) {
  var i = Array.from(document.getElementsByClassName(className));
  i.forEach(function(items) {
    console.info(Math.max(items.scrollHeight));
  });
}

但这什么也没有记录

console.info(items.scrollHeight);

记录所有三个数字。

我知道我遗漏了一个基本错误,有人可以指出我做错了什么吗?

基本上,我想获得最长的高度并将其设置为其余的div

最佳答案

我不是 100% 确定您到底在追求什么,但有几点:

1) 从 getElementsByClassName 切换到 querySelectorAll 会得到一个内置了 forEach 的对象。

2) 您只将 1 个值传递给 Math.max

function equalHeight(className) {
  var max = 0;
  document.querySelectorAll(className).forEach(
    function(el) {
      console.info(Math.max(el.scrollHeight, max));
      if (el.scrollHeight > max) {
        max = el.scrollHeight;
      }
    }
  );
  
  return max;
}

var max = equalHeight('.test');

console.info('Max div height:', max);
div {
  border: 1px dashed red;
  margin: 2px 0;
}
<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>

更新

对于您的问题“现在我如何将此值用作其余 div 的高度”:

function getMaxHeight(className) {
  var max = 0;
  document.querySelectorAll(className).forEach(
    function(el) {
      console.info(Math.max(el.scrollHeight, max));
      if (el.scrollHeight > max) {
        max = el.scrollHeight;
      }
    }
  );
  
  return max;
}

function setHeight(className, height) {
  document.querySelectorAll(className).forEach(
    function(el) {
      el.style.height = height+'px';
    }
  );
}


var max = getMaxHeight('.test');

console.info('Max div height:', max);

setHeight('.test', max);
div {
  border: 1px dashed red;
  margin: 2px 0;
}
<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>

但是,一旦执行此操作,所有 DIV 都不会再次更改高度。

您可以设置 el.style.minHeight,然后再次检查您是否更改了 DIV 中的任何内容。

关于javascript - 如何从纯javascript获取div的最长高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53384366/

相关文章:

javascript - 从多维数组中获取 X 的数组

c - 我们如何在C语言中将list(Python中的)函数实现为数组?

c++ - 在 C++ 中直接访问的内联数组声明

javascript - 如何从推文事件中获取推文 ID

javascript - 从 DOM 访问元素

javascript - 检查我的应用程序中的 ASP.Net 页面是从哪里打开的?

javascript - 透明图像叠加Mapbox GL JS

javascript - 这个 switch 语句和 jQuery 有什么问题?

php - 最后一个值没有出现在动态 php 数组中

javascript - 如何在 php 中制作二维键数组?