텍스트 노드에 대해 getBoundingClientRect()와 동일한 기능이 있습니까?

Question

텍스트 노드의 경계 사각형을 가져 오는 방법이 있습니까?

getBoundingClientRect() 메소드는 요소에만 정의되고 부모 요소는 실제 텍스트 노드보다 큽니다.

Answer 1

<span>에 텍스트 노드를 줄이면 해당 범위의 boundingRect이 표시됩니다. 당신은 IE8 이상을 지원할 필요가없는 경우

var span = document.createElement('span'); 
textNode.parentNode.insertBefore(span, textNode); 
span.appendChild(textNode); 
var rect = span.getBoundingClientRect(); 

Answer 2

, 당신은 Rangeselect the text node에를 사용하고 Range에서 직접 경계 RECT를 얻을 수 있습니다.

예 (이 페이지에서 작동한다) :

var text = document.getElementById('nav-questions').childNodes[0]; 
var range = document.createRange(); 
range.selectNode(text); 
var rect = range.getBoundingClientRect(); 
range.detach(); // frees up memory in older browsers 

당신은 또한 여러 텍스트 노드에 대해이를하고있는 경우 Range 개체를 다시 사용할 수 있습니다; 완료 될 때까지 range.detach()으로 전화하지 않도록하십시오. (참고 : Range.detach()은 이제 the DOM standard의 no-op입니다. 이전 브라우저는 호출 후에 범위 사용을 여전히 사용하지 않습니다.)