2016-04-13 11 views
3

Ich wollte wissen, ob es möglich ist, die Größe (die Breite und Höhe) der blauen Box zu erhalten, die erscheint, wenn Sie einen Text auswählen. Get selection text width height and sizeWie bekomme ich die Größe der blauen Textauswahl?

+0

Was haben Sie versucht? – Xzandro

+0

Noch nichts. Ich habe absolut keine Ahnung, wie es geht. Ich bin noch ein Anfänger im Programmieren. –

Antwort

1

document.getElementById("area").addEventListener("mouseup", function() { 
 
    var bcr = getSelection().getRangeAt(0).getBoundingClientRect(); 
 
    document.getElementById("info").innerHTML = "W: "+ bcr.width +' H:'+ bcr.height; 
 
}, false);
<div id="area"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat consectetur incidunt vel praesentium cum blanditiis tempora doloribus culpa odit! Labore at cum ad, voluptas nobis nam iste non omnis vitae? 
 
</div> 
 
<b id="info"></b>

So, nachdem Sie die Auswahl des Bereichs .getBoundingClientRect() in eine bcr Variable bekam man von jetzt an jeden beliebigen Wert abrufen können, dass diese Methode wie

Breite bietet, Höhe, oben, links, rechts, unten

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect

+0

Danke für deine Antwort Roko, aber ich hatte gehofft, dass ich die Auswahldimensionen bekommen konnte, als ich den Text wählte. Beispiel, ich wähle das Wort "text" und es gibt mir die Größe der Auswahlbox für diesen Text, aber es sollte für jeden Text funktionieren, den ich auswähle. Wenn es eine Möglichkeit gibt, den ausgewählten Text in eine Spanne zu setzen, als er funktionieren würde. –

+0

@HebertAG OK bearbeitet meine Antwort, in irgendeiner Weise verwenden '.getBoundingClientRect()' :) –

+0

Das ist genau das, was ich gesucht habe. Vielen Dank! Weißt du, ob es eine Möglichkeit gibt, die Auswahlboxposition (x und y) zu bekommen? Das ist nur aus Neugier, was ich wollte, war nur die Dimensionen. –

Verwandte Themen