如何以编程方式更改溢出和高度

【问题标题】：how to change overflow and height programmatically如何以编程方式更改溢出和高度
【发布时间】：2021-10-14 13:58:15
【问题描述】：

我有下面的 div 元素。我希望能够以编程方式更改height 和overflow 属性。我试图改变高度，如下所示，但它没有改变。

请告诉我如何以编程方式更改height 和overflow。

TypeScript/JavaScript：

document.getElementById('select-layer-overlay').style.height = '200px'

HTML/Angular

<div id="select-layer-overlay" style="height: 360px;overflow: auto;" *ngIf="showSelectLayers && selectedSite!=null">

【问题讨论】：

标签： javascript html css typescript

【解决方案1】：

我检查了同样的内容，它对我有用，但是由于您使用的是 Angular，因此最好不要通过直接引用这样的元素来更新 DOM，而是您可以提供一个类名并基于此您可以切换高度和溢出属性。

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  document.getElementById('select-layer-overlay').style.height = '200px';
})

#select-layer-overlay {
  border: 1px solid #ddd;
}

<div id="select-layer-overlay" style="height: 300px;overflow: auto;" >Hello</div>

<button id="btn">Click</button>

【讨论】：

是否有任何替代解决方案。您发布的那个也不起作用
它在这个 sn-p 中按预期工作对吗？当你点击下面的按钮时，你可以看到 div 高度动态降低到 200px。