如何使用javascript检测文本大小和位置？

Question

这是一个网站上的简单文字，我想知道My First Heading长度和高度是多少像素和位置...我怎样才能通过javascript检测到它？感谢。

Answer 1

var header = document.getElementById("yourHeadingId");
var w = header.offsetWidth;  //Width
var h = header.offsetHeight; //Height
var x = header.offsetLeft;   //Top left corner x position.
var y = header.offsetTop;    //Top left corner y position.

更改标题的内容：

while(header.firstChild) {
    header.removeChild(header.firstChild);
}
header.appendChild(document.createTextNode("some new content"));

Answer 2

element.offsetWidth / element.offsetHeight表示元素维度。 左上角位置element.offsetTop / element.offsetLeft（相对于其offsetParent）。

Answer 3

您可以使用clientHeight和clientWidth来计算值。像

document.getElementById("DOMID").clientWidth

Answer 4

你可以使用display：inline style ...创建一个临时h1元素，然后获取offsetWidth。 试试这个：

<script type="text/javascript">
    var domId = 'dom-id' + Math.random();
    var temp = document.createElement('div');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(temp);
    var text = document.getElementsByTagName('h1')[0].innerHTML;
    var width = null;
    var tempH1 = null;

    temp.innerHTML = '<h1 style="display: inline" id="' + domId + '">' + text + '</h1>';

    tempH1 = document.getElementById(domId);
    width = tempH1.offsetWidth;
    body.removeChild(temp);

    alert(width);
</script>