JS控制div的样式(窗口4：3处理算法)

最新推荐文章于 2021-09-07 17:25:50 发布

最新推荐文章于 2021-09-07 17:25:50 发布 · 167 阅读

本文提供了一段用于调整网页元素大小和位置的JavaScript代码，适用于不同屏幕尺寸下的自适应布局。

最简单，直接上代码：

var iHeight = document.getElementById("IndexRightDown_left").offsetHeight;
var iWidth = document.getElementById("IndexRightDown_left").offsetWidth;

if (iWidth > 4 * iHeight / 3){
iTemp = (iWidth - 4 * iHeight / 3) / 2;
document.getElementById("OCXDiv").style.position='relative';
document.getElementById("OCXDiv").style.top = 0;
document.getElementById("OCXDiv").style.left= iTemp;
document.getElementById("OCXDiv").style.width = 4 * iHeight / 3;
document.getElementById("OCXDiv").style.height= iHeight;
}else{
iTemp = (iHeight - 3 * iWidth / 4) / 2;
document.getElementById("OCXDiv").style.position='relative';
document.getElementById("OCXDiv").style.top = 0;
document.getElementById("OCXDiv").style.left= iTemp;
document.getElementById("OCXDiv").style.width = iWidth;
document.getElementById("OCXDiv").style.height= 3 * iWidth / 4 ;
}