JS - 如何获取按钮文本“结束”位置

Question

我有一个关于html按钮文本位置的问题。正如我所看到的，有很多方法可以让左上角的元素位置，但右上角的方法呢。例如

我有按钮：

<button style="text-align: left">Hello World</button>

...好的接下来我想知道内部文本“Hello World”的结尾是什么。那么有可能用js或最佳方式获得它吗？

由于

Answer 1

试试这个：

Pure JavaScript

http://jsfiddle.net/DerekL/AYAPY/3/

//1. wrap with content <span>
var txt=document.querySelector("button").innerHTML;
document.querySelector("button").innerHTML="";
document.querySelector("button").appendChild(document.createElement("span"));
document.querySelector("button span").innerHTML=txt;

//2. Get the <span>'s coordinate
var end_y=document.querySelector("button span").offsetTop;
var end_x=document.querySelector("button span").offsetLeft+document.querySelector("button span").offsetWidth;

//3. Done!
alert(end_x+", "+end_y);

使用jQuery

强烈推荐。
http://jsfiddle.net/DerekL/AYAPY/

---

  

我在这一点上放了一点“|”，只是为了告诉你返回的坐标是否正确。

Answer 2

将元素传递给getButtonCoords。它将返回一个对象（让我们称之为coords）。 coords.x是x坐标，coords.y是y坐标。

/* from stackoverflow.com/questions/442404/dynamically-retrieve-html-element-x-y-position-with-javascript */
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

function getButtonCoords(button) {
    /* wrap the text in a span element so we can get its coordinates */
    button.innerHTML = "<span id='button-text-" + button.id + "'>" + button.innerHTML + "</span>";

    /* get the span element */
    var button_span = document.getElementById('button-text-' + button.id);

    /* get the offset */
    var offset = getOffset(button_span);

    /* get the coordinates */
    var coords = { x: offset.left + button_span.offsetWidth, y: offset.top };

    /* return them */
    return coords;
}

/* get the button and pass it to the coordinate function */
var coords = getButtonCoords(document.getElementById('button-id'));
/* show the results */
alert(coords.x + ", " + coords.y);