tiempo - intervalos javascript

Medir cuadro delimitador de nodo de texto en Javascript

Question

Tengo problemas para obtener el tamaño, en píxeles, de un nodo de texto con Javascript. Ejemplo:

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

Necesito obtener el cuadro delimitador de los dos bloques de texto de forma independiente. Podría obtener el tamaño del segundo bloque simplemente midiendo el elemento <b>, pero el primero me elude. No parece que los nodos de texto en Javascript tengan una altura o anchura, por lo que puedo decir.

Ajustar el primer bloque de texto en un <span> y medirlo no es una opción, porque descubrí que un tramo no necesariamente hereda todos los estilos que están encima, y ​​cuando encierro el texto, de repente cambia de tamaño. Es como el principio de incertidumbre de Heisenberg de Javascript; Mi intento de medir algo lo cambia.

Estoy creando una aplicación que divide el HTML en páginas (EPUB HTML, en realidad), y necesito saber la posición, la altura y el ancho de cada bloque de texto en la página para saber si debo ponerlo en esta página o la siguiente pagina

¿Alguna sugerencia?

Answer 1

Intenta hacer los elementos que deseas medir en línea. Los elementos en línea solo ocupan tanto espacio como sea necesario. Por lo tanto, tiene un ancho y una altura absolutos que se pueden recuperar con javascript. Los elementos de bloque llenan todo el ancho del elemento contenedor. Por lo tanto javascript no puede acceder a su ancho.

Answer 2

Puede hacer esto con un Range que admita las extensiones de vista de CSSOM , que son los navegadores más recientes (Firefox 4+, WebKit desde principios de 2009, Opera 11, tal vez antes) y un TextRange en IE. El código de TextRange es tedioso, así que lo he omitido aquí.

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

Código:

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;
}