Làm thế nào để có được vị trí và kích thước của một nút văn bản HTML bằng cách sử dụng javascript?

Question

Ví dụ,

<div style="width:100px;text-align:center">text</div> 

Tôi muốn có được vị trí và kích thước của nút text văn bản, không wrapper div của nó. Có thể không?

Answer 1

Trong các trình duyệt hiện đại (Mozilla gần đây, WebKit và Opera), bạn có thể sử dụng getClientRects() method of a DOM range bao gồm nút văn bản.

var textNode = document.getElementById("wombat").firstChild; 
 
var range = document.createRange(); 
 
range.selectNodeContents(textNode); 
 
var rects = range.getClientRects(); 
 
if (rects.length > 0) { 
 
    console.log("Text node rect: ", rects[0]); 
 
}

<div id="wombat">Wombat</div>