如何获得蓝色文字选择的大小？

Question

我想知道是否可以获得选择文本时出现的蓝框的大小（宽度和高度）。

Answer 1

document.getElementById("area").addEventListener("mouseup", function() {
  var bcr = getSelection().getRangeAt(0).getBoundingClientRect();
  document.getElementById("info").innerHTML = "W: "+ bcr.width +' H:'+ bcr.height;
}, false);

<div id="area">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat consectetur incidunt vel praesentium cum blanditiis tempora doloribus culpa odit! Labore at cum ad, voluptas nobis nam iste non omnis vitae?
</div>
<b id="info"></b>

因此，在将选择范围.getBoundingClientRect()添加到bcr变量后，您可以从现在开始检索此方法提供的任何值，例如

宽度，高度，顶部，左侧，右侧，底部

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect