Получить координаты текстового узла
Есть например DIV на котором расположено несколько текстовых узлов. Как можно получить координаты этих узлов? :help:
|
Через getClientRects или range и getClientRects.
|
Aetae, можете привести пример как это сделать? Допустим если в консоль браузера вставить код
text=document.getElementById('post_message_473080').firstChild;
alert(text.textContent);
то alert() выдаст текст верхнего сообщения на этой странице. Что надо написать чтобы получить координаты того текстового узла? |
var text = document.getElementById('post_message_473080').firstChild;
var range = document.createRange();
range.selectNode(text);
var rect = range.getBoundingClientRect();
range.detach();
alert(
'top: ' + rect.top +
'\nleft: ' + rect.left
);
|
Спасибо, работает. Но появился ещё один вопрос. Как у объекта Range узнать координаты граничных точек setStart и setEnd? Ведь текстовый узел не всегда имеет прямоугольную форму, например когда места не хватает и текст переносится на второю строку.
|
var text = document.getElementById('post_message_475649').firstChild;
var range = document.createRange();
range.selectNode(text);
var rects = range.getClientRects(); //большой прямоугольник из маленьких состоит
[].forEach.call(rects, ({top, left, width, height}) => document.body.insertAdjacentHTML(
'beforeend',
`<div style="
top: ${top}px;
left: ${left}px;
width: ${width}px;
height: ${height}px;
position: fixed;
outline:1px dotted rgba(0,0,255,0.5);
"></div>`
));
range.detach();
|
В вашем коде много неизвестных для меня вещей. Может быть мне было бы легче в нём разобраться если бы этот код возвращал какой нибудь результат. Если его ввести в консоль браузера то нечего не происходит.
|
милт, на этой странице запустите код в консоли когда ваш предыдущий(#5) коммент будет в области видимости.)
По сути rects - псевдомассив объектов, содержащих координаты (top, left, width, height, right, bottom) прямоугольников по одному на каждую строчку текста. Остальное - просто рисование в es6 стиле.) |
| Часовой пояс GMT +3, время: 07:43. |