Question

我正在尝试动态检索Bootstrap popover的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 popover的height/width？

Answer 1

＆＃13;

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

＆＃13;

Answer 2

这应该有效。您将获得宽度为“276px”的值，高度为“98px”。这些就是我在这个页面上得到的：https://v4-alpha.getbootstrap.com/components/popovers/#example-using-the-container-option和Live Demo。使用Dev Tools的Computed-tab上的宽度和高度值检查控制台中的值。：

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

//对于未附加“px”的数值，请在parseInt（）中包装：

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

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

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

我在Chrome的控制台中测试了上面的2行（当然还有不同的popover ID）。

检索bootstrap 4 popover的高度/宽度？

2 个答案: