javascript - Hvordan kan jeg beregne høyden på et tekstutvalg uten å endre DOM-en

Jeg bruker Range til å manipulere valgt tekst. Jeg vil gjerne beregne høyden fra der noen begynte å velge tekst til der de avsluttet.

Jeg har prøvd et spenn til begynnelsen og slutten av det valgte området, og jeg kan nøyaktig beregne høyden fra det, men det endrer DOM-en og hindrer meg i å utføre noen andre område-manipulasjoner som å utheve tidligere valgt tekst.

Jeg har også prøvd å samle inn posisjonen til mousedown og mouseup-posisjonene, men jeg trenger en nøyaktig høyde fra toppen av den valgte teksten til bunnen av teksten der valget ble sluppet, og det er ikke alltid tilfellet.

Så jeg lurte på om det fantes en måte å beregne høyden på et tekstutvalg uten å endre DOM-en?

Svar #1

Det avhenger av hvilke nettlesere du trenger å håndtere. Her er en funksjon som vil fungere i IE >= 4 og nettlesere som støtter getClientRects() i Range (Firefox >= 4, WebKit siden 2009, Opera). Hvis du trenger støtte for eldre nettlesere, må du endre DOM-en, noe som faktisk er greit så lenge du gjenoppretter DOM-en til sin tidligere tilstand.

jsFiddle: http://jsfiddle.net/W84yW/

Kode :

function getSelectionHeight() {
    var selHeight = 0;
    if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        selHeight = textRange.boundingHeight;
    } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (!range.collapsed && range.getClientRects) {
                var startRange = range.cloneRange();
                startRange.collapse(true);
                var selTop = startRange.getClientRects()[0].top;
                startRange.detach();
                var endRange = range.cloneRange();
                endRange.collapse(false);
                selHeight = endRange.getClientRects()[0].bottom - selTop;
                endRange.detach();
            }
        }
    }
    return selHeight;
}

Svar #2

Jeg ville hente den valgte teksten og plassere den i en skjult div med samme bredde og samme stiler, og få høyden dens.