क्या पाठ नोड्स के लिए getBoundingClientRect() के बराबर है?

Question

क्या टेक्स्ट नोड के बाउंडिंग रेक्ट को पाने का कोई तरीका है?

GetBoundingClientRect() विधि केवल तत्वों पर परिभाषित की गई है, और मूल तत्व वास्तविक टेक्स्ट नोड बड़ा है।

Answer 1

<span> में टेक्स्ट नोड को लपेटें, उस अवधि के boundingRect प्राप्त करें।

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

Answer 2

आप IE8 या उससे अधिक का समर्थन की जरूरत नहीं है, तो आप एक Rangeselect the text node का उपयोग कर सकते हैं, और फिर Range से सीधे रेक्ट बाउंडिंग मिलता है।

उदाहरण (इस पेज में काम करना चाहिए):

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 में नो-ऑप है, हालांकि पुराने ब्राउज़र अभी भी इसके आमंत्रण के बाद सीमा का उपयोग अक्षम कर देंगे।)