javascript - javascriptを使用してテキストサイズと位置を検出するにはどうすればよいですか?

Question

これは Web サイトの簡単なテキストです。長さと高さをピクセル数と位置で知りたいのですが、My First Headingjavascript でそれを検出するにはどうすればよいですか? ありがとう。

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>