Comment obtenir le décalage de caractère X & Y (coordonnées)

Question

On m'a parlé de textRange dans IE, mais je ne trouve pas d'équivalent dans d'autres navigateurs pour cela. J'ai besoin d'un moyen de lire les décalages X, Y de l'élément que le spectateur voit.

Answer 1

Firefox a l'objet Range au lieu de TextRange dans IE - https://developer.mozilla.org/en/DOM/range

Dès le premier regard que je ne vois pas les méthodes qui renvoient les coordonnées, mais ils ont quelque chose qui va venir dans la version 4.0 qui pourrait aider:

https://developer.mozilla.org/en/DOM/range.getBoundingClientRect

Renvoie un objet qui ClientRect limite le contenu de la plage; ce un rectangle englobant l'union des rectangles englobants pour tous les éléments de la gamme.

Vous pouvez également regarder ici: https://developer.mozilla.org/en/DOM%3aElement.getClientRects

La valeur retournée est une collection de objets ClientRect, une pour chaque boîte de frontière CSS associée à l'élément . Chaque ClientRect objecter contient lecture seule gauche, en haut, à droite et les propriétés de fond décrivant la zone de bordure , en pixels, avec le supérieur gauche par rapport à la partie supérieure gauche de la vue, à moins que l'élément est l'intérieur d'un Élément SVG foreignobject, auquel cas la partie supérieure gauche est relative à l'ancêtre d'objet étranger le plus proche et au système de coordonnées de cet objet étranger . Pour les tableaux avec les légendes , la légende est incluse même bien qu'elle se trouve en dehors de la zone de bordure de la table.

Initialement, Microsoft avait l'intention cette méthode pour renvoyer un objet TextRectangle pour chaque ligne de texte. Toutefois, le projet de travail CSSOM spécifie que renvoie un ClientRect pour chaque boîte de bordure . Pour un élément en ligne, les deux définitions sont identiques. Mais pour un élément de bloc, Mozilla renverra seulement un seul rectangle.

Pour sélectionner:

IE:

var range = document.body.createTextRange(); 
range.moveToElementText(myDiv); 
range.select(); 

Firefox, Opera, WebKit nightlies:

var selection = window.getSelection(); 
var range = document.createRange(); 
range.selectNodeContents(myDiv); 
selection.removeAllRanges(); 
selection.addRange(range); 

Safari:

var selection = window.getSelection(); 
selection.setBaseAndExtent(myDiv, 0, myDiv, 1);