Question

我连续3个div，每个div包含一段文字。

如何在本机JS中找到三个中最高的div？

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

Answer 1

var biggestHeight = 0;
var elements = document.querySelectorAll('div.block-text');
elements.forEach(function(element, index){
    console.log('div ' + index + ' height  = ' + element.offsetHeight + 'px');
    biggestHeight = element.offsetHeight > biggestHeight ? element.offsetHeight : biggestHeight;
});

console.log('biggestHeight = ' + biggestHeight + 'px');

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

Answer 2

你可以这样做

步骤：

使用选择器
循环遍历它们以获取所有元素的高度和任何唯一标识符
获取最大高度
获取高度为maximum的元素（第3步中的内容）

＆＃13;

var els = document.querySelectorAll(".block-text"),
    arr = [];

for(var i=0; i< els.length; i++){
   arr.push({id: els[i].id,height: els[i].clientHeight});
}

console.log("Maximun height ",Math.max(...arr.map(o=> o.height)))

console.log("element with the id ", arr.find(e=>e.height ===Math.max(...arr.map(o=> o.height))).id)

＆＃13;

<div class="block-text" id="1">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text" id="2">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text" id="3">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

＆＃13;

Answer 3

如果我没有误解你的问题，这就是你需要的。

<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

pod install

Answer 4

请尝试以下脚本

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

new

Answer 5

您可以使用forEach()和clientHeight执行以下操作：

＆＃13;

var divs = document.querySelectorAll('.block-text');
var height = 0;
divs.forEach(function(d){
  height = height < d.clientHeight ?  d.clientHeight : height;
});
console.log('Tallest div height:', height);

＆＃13;

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

＆＃13;

Answer 6

以降序获取所有div高度和sort以获得最大高度

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => [i, s.scrollHeight] );
//sort the values by height, second index value
heightsByIndex.sort( (a, b) => b[1] - a[1] );

console.log("Max height " , heightsByIndex[0][1]);

<强>演示

＆＃13;

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => [i, s.scrollHeight] );
//console.log(heightsByIndex);

//sort the values by height, second index value
heightsByIndex.sort( (a, b) => b[1] - a[1] );

console.log("Max height " , heightsByIndex[0][1]);

＆＃13;

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

＆＃13;

或者只是获得数组中的所有高度并获得最大值。

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => s.scrollHeight );

console.log("Max height " , Math.max.apply(null,heightsByIndex));

<强>演示

＆＃13;

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => s.scrollHeight );
//console.log(heightsByIndex);

console.log("Max height " , Math.max.apply(null,heightsByIndex));

＆＃13;

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

＆＃13;

Answer 7

从学习者的角度来看，我会尝试让这个答案有所帮助。

你说原生JS - 但是，如果你正在做所有事情javascript（即你没有使用像React或Angular这样的框架） - 那么你也可以使用JQuery - 基本上有一些方便的方法和较短的语法。

我也假设你在这里使用ES5，所以我不会使用任何ES6功能。

首先，您要找到所有div元素：

我要去谷歌按类javascript＆＃39;找到元素。我通常会选择第一个mozilla结果，即Document.getElementsByClassName()。

所以我们的第一行是：

var elements = document.findElementsByClassName('block-text');

这将包含一系列html元素。

我们需要做的下一件事是迭代元素。

现在javascript有一堆方便的数组函数。请查看此处的文档：Array.prototype

让我们看看我们是否能在那里找到一个能够真正做到这一点的功能。

看起来Array.reduce()会做我们正在寻找的事情。

好的，哎呀！看起来document.getElementsByClassName从var arr = [].slice.call(elements); arr.reduce(function(acc, v) { //return the div with the higher height });返回的不是数组，而是HTMLCollection。但我们可以使用this solution进行转换。

我们可以这样做：

var elements = document.getElementsByClassName('block-text'); 

var arr = [].slice.call(elements);

var tallest = arr.reduce(function(acc, v) {
 return (acc.clientHeight > v.clientHeight) ? acc : v;
}); 

console.log(tallest);

第三，我们需要测量div的高度。

Imma google＆＃39;找到div javascript的高度＆＃39;：我们将使用the first stack overflow result.

将它们放在一起，看起来像是：

＆＃13;

<div class="block-text a">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text b">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text c">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

＆＃13;

margin: #{(-5/16)}rem; /* margin: -0.3125rem; */

＆＃13;

JavaScript - 找到最高div的高度

7 个答案: