如何获取Div前指定高度（如100px）范围内的内容？

Absolutely! You can pull off this task with either vanilla JavaScript or jQuery—no extra plugins needed for most common scenarios. Let’s break down how to do it, depending on your HTML structure.

Scenario 1: Content in Discrete Block Elements (e.g., <p>, <div> per line) #

If your target div contains separate block elements for each line (like the 10 <p> tags in your example), this is straightforward. We just need to check each element's position relative to the container's top and collect those that fit within your desired height range.

Vanilla JavaScript Implementation #

<div id="targetDiv" style="height: 500px; overflow: hidden;">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <!-- ... 7 more lines ... -->
</div>

function getTopRangeContent(containerId, maxHeight) {
  const container = document.getElementById(containerId);
  const childElements = container.children;
  const matchingContent = [];

  for (const element of childElements) {
    // Calculate the element's position relative to the container
    const elementTop = element.offsetTop;
    const elementBottom = elementTop + element.offsetHeight;

    // If the entire element fits within the top range, add its content
    if (elementBottom <= maxHeight) {
      matchingContent.push(element.textContent.trim());
    } else {
      // Stop once we hit an element that's outside the range
      break;
    }
  }

  return matchingContent;
}

// Usage: Get content in the first 100px
const top100pxContent = getTopRangeContent('targetDiv', 100);
console.log(top100pxContent);

jQuery Implementation #

If you prefer jQuery, the logic is nearly identical—just wrapped in jQuery's shorthand methods:

function getTopRangeContent($container, maxHeight) {
  const matchingContent = [];
  $container.children().each(function() {
    const $child = $(this);
    // Calculate position relative to the container
    const childTop = $child.offset().top - $container.offset().top;
    const childBottom = childTop + $child.outerHeight();

    if (childBottom <= maxHeight) {
      matchingContent.push($child.text().trim());
    } else {
      // Exit the .each() loop early
      return false;
    }
  });
  return matchingContent;
}

// Usage
const $container = $('#targetDiv');
const top100pxContent = getTopRangeContent($container, 100);
console.log(top100pxContent);

Scenario 2: Flowing Text (No Discrete Line Elements) #

If your div contains plain, unstructured text (no per-line tags), we need to use the browser's Range API to precisely select text up to the desired height. This handles cases where text wraps naturally based on the container's width.

function getTextInTopHeight(container, maxHeight) {
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(container);

  // If the entire container is shorter than the target height, return all text
  const containerRect = container.getBoundingClientRect();
  const fullHeight = containerRect.height;
  if (maxHeight >= fullHeight) {
    return container.textContent.trim();
  }

  // Use binary search to find the exact text offset that hits the max height
  let startOffset = 0;
  let endOffset = range.endOffset;
  let bestOffset = 0;

  while (startOffset <= endOffset) {
    const midOffset = Math.floor((startOffset + endOffset) / 2);
    range.setEnd(container.firstChild, midOffset);
    const rangeRect = range.getBoundingClientRect();
    const rangeHeight = rangeRect.bottom - containerRect.top;

    if (rangeHeight <= maxHeight) {
      bestOffset = midOffset;
      startOffset = midOffset + 1;
    } else {
      endOffset = midOffset - 1;
    }
  }

  // Extract the selected text and clean up
  range.setEnd(container.firstChild, bestOffset);
  const selectedText = range.toString().trim();
  selection.removeAllRanges();
  return selectedText;
}

// Usage
const container = document.getElementById('targetDiv');
const top100pxText = getTextInTopHeight(container, 100);
console.log(top100pxText);

Do You Need Plugins? #

For most use cases, no plugins are required. The native JavaScript APIs and jQuery methods above handle both discrete block elements and flowing text. If you're dealing with extremely complex layouts (e.g., floating elements, dynamic CSS transformations), you might want to use a layout calculation library, but those are edge cases.

Key Notes #

• Always run your code after the DOM is fully loaded (wrap it in DOMContentLoaded event listener or place it at the end of the body).
• For elements with margins/padding, use outerHeight(true) in jQuery (includes margins) or account for marginTop/marginBottom in vanilla JS.
• The Range API method works across all modern browsers, but test edge cases (like long words that wrap) to ensure it behaves as expected.

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