如何获取行内元素的当前上下行边界？以元素AAA为例

Great question! When dealing with inline elements that don’t define the line box’s height (like your small, vertically-aligned #AAA), you don’t have to loop through all inline elements in the line. Here are two reliable approaches:

Approach 1: Use a Temporary Inline-Block Element #

This method leverages an inline-block element that automatically fills the full height of the line box, letting you grab its bounds directly without touching other elements:

function getLineBoxBounds(element) {
  // Create a temporary span that stretches to the line box's full height
  const tempSpan = document.createElement('span');
  tempSpan.style.cssText = `
    display: inline-block;
    height: 100%;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: none;
    visibility: hidden; /* Hide visually without affecting layout */
  `;

  // Insert the span right before the target element (same line)
  element.before(tempSpan);

  // Get the span's bounds—this matches the line box's full dimensions
  const rect = tempSpan.getBoundingClientRect();
  
  // Clean up: remove the temporary element immediately
  tempSpan.remove();

  return {
    top: rect.top,
    bottom: rect.bottom,
    left: rect.left,
    right: rect.right
  };
}

// Example usage with your #AAA element
const aaa = document.getElementById('AAA');
const lineBounds = getLineBoxBounds(aaa);
console.log(`Line top: ${lineBounds.top}, Line bottom: ${lineBounds.bottom}`);

Why this works: #

An inline-block element with height: 100% will automatically stretch to match the full height of the containing line box—even if the target element is smaller or vertically aligned. We use visibility: hidden to avoid visual clutter, and the element is removed right after we get the bounds, so it doesn’t leave any trace.

Approach 2: Use the Range API (Modern, But Browser Support Caveats) #

If you prefer avoiding temporary DOM elements, you can use the Range API to select the entire line box and retrieve its bounds:

function getLineBoxBoundsWithRange(element) {
  const range = document.createRange();
  // Start the range at the beginning of the element's content
  range.setStart(element.firstChild, 0);
  // Expand the range to cover the entire line
  range.expand('line');
  
  const rect = range.getBoundingClientRect();
  return {
    top: rect.top,
    bottom: rect.bottom,
    left: rect.left,
    right: rect.right
  };
}

// Example usage
const lineBounds = getLineBoxBoundsWithRange(document.getElementById('AAA'));

Caveat: #

The expand('line') method has limited browser support (it’s not available in Firefox as of 2024), so this approach is less reliable for cross-browser projects compared to the temporary element method.

Key Takeaways: #

• Don’t rely on element.offsetTop or getBoundingClientRect() for the target element alone—these only return the bounds of the element itself, not the full line box.
• The temporary inline-block method works across all modern browsers and handles edge cases like mixed font sizes, vertical alignment, and line wrapping flawlessly.

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