Как установить свойство css в соответствии со свойством css другого элемента

Question

Я использую ionic 4 и хочу установить некоторый элемент маски над другим элементом. Моим элементом маски является фиксированное изображение, которое я хочу установить чуть выше панели вкладок ion - это означает, что я хочу, чтобы свойство css моего изображения "bottom" было таким же, как свойство "height" ion-tab-bar css. значение.

Я уже пробовал это на странице вкладок:

ionViewDidEnter() {
    document.getElementById('mask').style.bottom = document.getElementById('tabsbar').style.height;
}

Но свойство style вернуло пустые поля ...

Есть ли другой способ? может быть с ngStyle?

Answer 1

Решено так:

ionViewDidEnter() {

  document.getElementById('mask').style.bottom = document.getElementById('tabsbar').getBoundingClientRect().height+'px';

}

Answer 2

Вы можете пойти по пути jquery:

function hallo(){
    $("#num1").css("bottom", $("#num2").css("height")); 
}

#num1{
position: absolute;
bottom: 100px;
background-color: red;
padding: 15px;
width: 100px;
height: 50px;
}
#num2{
position: absolute;
top: 0;
left: 100px;
background-color: green;
padding: 15px;
width: 100px;
height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="num1">
</div>
<div id="num2">

<button onclick="hallo();">I position red div at bottom: 150px</button>
</div>