Получить высоту/ширину бутстрапа 4 popover?

Question

Я пытаюсь восстановить height/width из Bootstrap popover динамически. У меня есть контекст, который я пытаюсь захватить height/width:

console.log(context); 
console.log(context.getBoundingClientRect().height); 
console.log(context.getBoundingClientRect().width); 

Это выводит Bootstrap элемент:

<div class="popover fade bs-tether-element bs-tether-enabled bs-tether 
element-attached-middle bs-tether-element-attached-left bs-tether-target 
attached-middle bs-tether-target-attached-right in" role="tooltip" 
id="popover537457" style="top: 0px; left: 0px; position: absolute; transform: 
translateX(904px) translateY(227px) translateZ(0px);"><h3 class="popover 
title"></h3><div class="popover-content"><div class="tooltip-content">To learn 
more about naming convention please <a href="#">click here</a></div></div 
</div> 

height/width однако, что я console log выше возвращения 0. Кто-нибудь знает, как я могу выполнить извлечение height/width Bootstrap 4 popover?

Answer 1

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="popover fade bs-tether-element bs-tether-enabled bs-tether 
 
element-attached-middle bs-tether-element-attached-left bs-tether-target 
 
attached-middle bs-tether-target-attached-right in" role="tooltip" 
 
id="popover537457" style="display: block"><h3 class="popover 
 
title"></h3><div class="popover-content"><div class="tooltip-content">To learn 
 
more about naming convention please <a href="#">click here</a></div></div> 
 
</div>

Answer 2

Это должно работать. Вы получите значения, такие как «276px» для ширины и «98px» для высоты. Это то, что я получил на этой странице: https://v4-alpha.getbootstrap.com/components/popovers/#example-using-the-container-option с Live Demo. Проверьте значения в консоли с значениями ширины и высоты на вкладке «Вычисления» в Dev Tools. :

window.getComputedStyle(context).getPropertyValue("width"); 
window.getComputedStyle(context).getPropertyValue("height"); 

// Для числовых значений без "рх" postpended, завернуть в ParseInt():

parseInt(window.getComputedStyle(context).getPropertyValue("width")); 
parseInt(window.getComputedStyle(context).getPropertyValue("height"); 

// ИЛИ Если вы можете определить идентификатор (ы) всех Popovers на том, что страница в массиве можно сделать следующее (замените поповер ID строковый литерал с переменной или элемента массива, содержащего идентификатор пирог.):

window.getComputedStyle(document.getElementById('popover537457')).getPropertyValue("width") 
window.getComputedStyle(document.getElementById('popover537457')).getPropertyValue("height") 

Я тестировал в консоли Chrome с 2-х строк выше (и различаются конечно, идентификатор popover).