如何使用纯JavaScript根据宽度调整div高度

调整

div的大小时

使用约束比率根据宽度更改高度

---

@示例div

width:300

和

height:600

下一步将根据宽度将宽度更改为

400

高度更改为

800

，您需要找到元素的当前宽度，然后重置其高度

下面是一个简单的例子。它使用offsetWidth来获取当前宽度，但这取决于您的用例，这可能不够好，也可能不够好。看

通常，offsetWidth是元素CSS宽度的像素度量，包括任何边框、填充和垂直滚动条（如果渲染）。它不包括伪元素的宽度，例如：：before或：：after。如果元素被隐藏（例如，通过将元素或其祖先之一上的style.display设置为“none”），则返回0

//用于设置元素高度与其宽度成比例的函数
//el是我们感兴趣的元素。
//比率是我们想要的宽度与高度的比率
功能设置高度（el，比率）{
//首先，我们需要找出el当前的宽度
const w=el.offsetWidth；//这将始终返回一个整数
控制台日志（w）；
el.style.height=（宽*比）+‘px’；
//注意：当存在转换时，您还可以研究getBoundingClientRect（）.width以了解更一般的情况
}

---

单击我

您是在谈论div元素中的宽度和高度属性，还是希望在运行时更改宽度/高度，而宽度/高度可能已通过CSS/JS设置进行了更改？