Đo khung giới hạn của nút văn bản trong Javascript

Question

Tôi gặp sự cố khi nhận kích thước, tính bằng pixel, của nút văn bản sử dụng Javascript. Ví dụ:

 
<p> 
    first text block 
    <b>second text block</b> 
</p> 

Tôi cần nhận hộp giới hạn của hai khối văn bản một cách độc lập. Tôi có thể nhận được kích thước của khối thứ hai chỉ bằng cách đo các yếu tố < b>, nhưng một trong những đầu tiên eludes tôi. Nó không xuất hiện mà textnodes trong Javascript có chiều cao hoặc chiều rộng, cho đến nay như tôi có thể nói.

Bao gói khối văn bản đầu tiên trong khoảng < và đo không phải là tùy chọn, bởi vì tôi đã phát hiện ra rằng một khoảng không nhất thiết kế thừa tất cả các kiểu trên đó và khi tôi quấn văn bản kích thước. Nó giống như Nguyên lý bất định Heisenberg của Javascript; nỗ lực của tôi để đo lường một cái gì đó thay đổi nó.

Tôi đang xây dựng một ứng dụng tách HTML thành các trang (HTML EPUB, thực sự) và tôi cần biết vị trí, chiều cao và chiều rộng của từng khối văn bản trên trang để tôi có thể biết đặt trên trang này hoặc trang tiếp theo.

Mọi đề xuất?

Answer 1

Bạn có thể thực hiện việc này với Range hỗ trợ CSSOM View extensions, trình duyệt mới nhất (Firefox 4+, WebKit từ đầu năm 2009, Opera 11, có thể sớm hơn) và TextRange trong IE. Mã số TextRange rất tẻ nhạt, vì vậy tôi đã bỏ qua nó ở đây.

jsFiddle: http://jsfiddle.net/gdn6C/1/

Code:

function getTextNodeHeight(textNode) { 
    var height = 0; 
    if (document.createRange) { 
     var range = document.createRange(); 
     range.selectNodeContents(textNode); 
     if (range.getBoundingClientRect) { 
      var rect = range.getBoundingClientRect(); 
      if (rect) { 
       height = rect.bottom - rect.top; 
      } 
     } 
    } 
    return height; 
} 

Answer 2

Hãy thử tạo các yếu tố bạn muốn đo lường nội tuyến. Các phần tử nội dòng chỉ chiếm nhiều không gian theo yêu cầu. Do đó, nó có chiều rộng và chiều cao tuyệt đối có thể được truy xuất bằng javascript. Các phần tử khối lấp đầy toàn bộ chiều rộng của phần tử chứa. Vì vậy javascript không thể truy cập chiều rộng của nó.