记录一次前端开发div高度统一的方法

Fenger Lv3

某些纯前端开发过程中,需要同行甚至跨行div高度统一,而不想去使用 CSS Flexbox CSS Grid ,则可以使用以下js和jQuery方法简单实现高度统一。

使用方法

想要高度一致的div(不局限于div,block的所有元素都可以)统一类名,然后调用方法即可。

原生JS

1
2
3
4
5
6
7
8
9
10
11
12
function sameHeight(className){
const $ = document.getElementsByClassName(className);
let array = [];
for (let i = 0; i < $.length; i ++){
$.item(i).style.height="auto";
array.push($.item(i).offsetHeight);
}
const h = Math.max.apply(Math, array);
for (let g = 0; g<$.length; g++){
$.item(g).style.height= h + "px";
}
}

jQuery

1
2
3
4
5
6
7
8
9
10
function sameHeight (className){
const cName = "." + className;
$(cName).height("auto");
let array = [];
for (let i = 0; i < $(cName).length; i ++) {
array.push($(cName).eq(i).height());
}
const h = Math.max.apply(Math, array);
$(cName).height(h);
}

有问题还望指导指正,在此表示感谢!

  • 标题: 记录一次前端开发div高度统一的方法
  • 作者: Fenger
  • 创建于 : 2021-11-08 16:58:23
  • 更新于 : 2023-11-14 14:18:12
  • 链接: https://www.fenger.net.cn/2021/11/08/js_sameHeight/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
此页目录
记录一次前端开发div高度统一的方法