1. 云期刊首页
  2. 开发教程

js代码完美实现并排显示的两个DIV高度保持一致(一个DIV高度自适应另一个DIV)

同一行并排显示的两个div盒子,根据一个DIV的高度确定另一个DIV的高度,是开发经常遇到的问题,如果DIV宽度指定后可以采用的方法有flex、padding-bottom或table-cell三种方法。如果宽度不指定就只能用JQ或者JS来处理。通过尝试,本文的js代码完美实现并排显示的两个DIV高度保持一致(一个DIV高度自适应另一个DIV变化)。

js代码完美实现并排显示的两个DIV高度保持一致(一个DIV高度自适应另一个DIV)

JQ代码:

判断控制页面初始时左右DIV的高度,通过定义hl和hr两个变量获取div的高度,然后比较hl和hr的高度,然后将较大的高度赋值给变量mh,再把变量mh的值赋值给两个DIV。缺点:要等页面加载完后才调整DIV的高度,并且如果有多行并排的DIV则效果很不理想。

<script type="text/javascript">
window.onload = function(){                                     //设置页面加载完成后运行JS
var hl = $("左侧div的ID或Class名").outerHeight();               //获取左侧left层的高度
var hr = $("右侧div的ID或Class名").outerHeight();               //获取右侧right层的高度
var mh = Math.max(hl,hr);                                       //比较hl与hr的高度,并将最大值赋给变量mh
$("左侧div的ID或Class名").height(mh);                           //将left层高度设为最大高度mh
$("右侧div的ID或Class名").height(mh);                           //将right层高度设为最大高度
}
</script>

JS代码:

下面的js代码是获取右侧div的高度,赋值给左侧div。定义变量hr,然后通过变量hr获取右侧DIV的高度赋值给mh,再定义变量hl,通过变量mh赋值给hl。缺点:js代码中没有加入高度比较判断,需要自己把高度大的div赋值给高度低的DIV,并且在有多行DIV并排时,第二行会不起作用。

<script type="text/javascript">
function height(){
var hr=document.querySelector("右侧div的ID或Class名");
var mh=hr.offsetHeight+'px'||hr.clientHeight+'px';
var hl=document.querySelector("左侧div的ID或Class名");
hl.style.height=mh;
}
height();
</script>

完美版js代码:

完美版js代码可以解决同一行的两个DIV宽度,高度不确定时,让一个DIV的高度随着另一个DIV的高度变化,并且完美解决了有多行DIV并排时,第二行不起作用的问题。下面的代码是获取右边div的高度赋值给左边div,可以通过交换【自定义变量1】和【自定义变量2】对应的DIV名,调整为把左边的div高度赋值给右边的DIV。

<script type="text/javascript">
var 自定义变量1 = document.querySelectorAll("左边DIV的ID或Class名");
var 自定义变量2 = document.querySelectorAll("右边DIV的ID或Class名");
function height(a, b) {
var 自定义变量3;
var 自定义变量4 = [];
for (var i = 0; i < a.length; i++) {
自定义变量3 = a[i].offsetHeight + 'px';
自定义变量4.push(自定义变量3);
}
console.log(自定义变量3);
for (var k = 0; k < b.length; k++) {
b[k].style.height = 自定义变量4[k];
}
}
height(自定义变量2, 自定义变量1);
</script>

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:https://www.yunqikan.cn/4827.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部