选中Marker节点并折叠Range后，getBoundingClientRect全返回0该如何解决？

嘿，我来帮你搞定这个问题！你遇到的情况其实挺常见的——当你折叠Range之后，它就变成了一个空的光标位置，不再对应任何有尺寸的元素范围，所以调用range.getBoundingClientRect()自然会返回全0的属性值。不过别担心，有两个靠谱的办法能拿到正确的位置：

方法一：借助Selection获取光标实际渲染位置 #

当你把折叠后的Range添加到Selection里之后，Selection会跟踪这个光标在页面上的实际渲染位置，这时候用Selection.getClientRects()就能拿到准确的矩形信息：

$('button').on('click', function() {
  const range = document.createRange();
  const $marker = $('#marker');
  const markerEl = $marker.get(0);
  
  range.selectNode(markerEl);
  range.collapse(); // 默认折叠到节点的起始位置，传false可以折叠到结束位置
  
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range); // 必须把Range添加到Selection，这步很关键！

  // 获取光标对应的矩形集合，取第一个就是我们需要的位置
  const cursorRects = sel.getClientRects();
  if (cursorRects.length > 0) {
    const rect = cursorRects[0];
    console.log('光标位置：', rect.top, rect.left, rect.height);
  }
});

这个方法的优势是能自动处理各种复杂情况，比如inline元素换行、特殊排版等，返回的是浏览器实际渲染的光标位置，准确性最高。

方法二：通过原元素位置推导光标位置 #

如果你不想操作Selection，也可以直接获取marker元素的位置，然后根据折叠方向来计算光标位置：

$('button').on('click', function() {
  const range = document.createRange();
  const $marker = $('#marker');
  const markerEl = $marker.get(0);
  
  range.selectNode(markerEl);
  const markerRect = markerEl.getBoundingClientRect();
  
  // 折叠到节点起始位置
  range.collapse(true);
  const startCursorRect = {
    top: markerRect.top,
    left: markerRect.left,
    width: 0,
    height: markerRect.height // 高度和原元素一致
  };
  console.log('起始位置光标：', startCursorRect);

  // 如果要折叠到节点结束位置，这么算：
  // range.collapse(false);
  // const endCursorRect = {
  //   top: markerRect.top,
  //   left: markerRect.left + markerRect.width,
  //   width: 0,
  //   height: markerRect.height
  // };
});

这个方法更轻量，适合不需要显示选中文本的场景，但要注意：如果marker元素是inline且存在换行，推导的结束位置可能和实际渲染位置有偏差，这时候还是方法一更稳妥。

额外注意点 #

• 确保你的#marker元素是可见状态（display不为none，visibility不为hidden），否则它自身的getBoundingClientRect()也会返回全0；
• 如果是在隐藏元素内部操作，得先让元素临时显示再获取位置，获取完再隐藏回去。

内容的提问来源于stack exchange，提问作者Amr Noman