如何获取 css 属性并通过 javascript 更改 html 元素的高度

Question

我尝试创建一个 div 元素并从 CSS 选择器读取高度。 最后通过 javascript 更改 div 元素高度。 当我使用div.style.height ='15px'; 工作正常，但我想动态改变高度，因为我的 CSS class 将通过响应 function 改变。

我的 CSS 是：

    #indicator {
        width: 15px;
        height: 15px;
    }

我将此代码用于脚本：

 div = document.createElement("div");// valve_indicator
 div.style.border = '1px solid #b3280a';

 div.style.height =document.getElementById('indicator').style.height; // instead div.style.height ='15px';
 div.style.width = '15px';
 cell.appendChild(div); // cell is a table cell

但是document.getElementById('indicator').style.height返回 null。 请帮助我提前谢谢

Answer 1

删除#indicator中的# 。 getElementById()在 id 名称前不需要#符号

document.getElementById('indicator').style.height

如果您想动态更改indicator height ：

let indicator = document.getElementById('indicator');
indicator.addEventListener("change", function(){
    div.style.height = indicator.style.height;
}) 

Answer 2

我通过使用此代码解决了我的问题

div.className='indicator';