javascript - 如何使用 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>