检索引导程序 4 弹出窗口的高度/宽度？答案

【问题标题】：Retrieve height/width of bootstrap 4 popover?检索引导程序 4 弹出窗口的高度/宽度？
【发布时间】：2017-03-14 02:42:12
【问题描述】：

我正在尝试动态检索 Bootstrap 弹出框的 height/width。我有我尝试抓住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。任何人都知道我可以如何完成检索 Bootstrap 4 弹出框的 height/width 吗？

【问题讨论】：

在jsfiddle中添加你的html、css和javascript...这样会更好的理解和帮助你。

标签： javascript jquery html bootstrap-4 twitter-bootstrap-4

【解决方案1】：

这应该可行。你会得到像宽度为“276px”和高度为“98px”的值。这些是我在这个页面上得到的：https://v4-alpha.getbootstrap.com/components/popovers/#example-using-the-container-option 和现场演示。使用 Dev Tools 的 Computed 选项卡上的宽度和高度值检查控制台中的值。：

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

// 对于没有“px”后缀的数值，包裹在 parseInt() 中：

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

// 或者如果您可以在数组中确定该页面上所有弹出框的 ID，您可以执行以下操作（将弹出框 ID 字符串文字替换为包含弹出框 ID 的变量或数组元素。 ) :

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

我在 Chrome 的控制台中使用上述 2 行进行了测试（当然还有不同的弹出框 ID）。

【讨论】：

【解决方案2】：

<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>

【讨论】：