我正在努力实现可以通过 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/