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

Question

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

我有按钮：

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

...好的，接下来我想知道内部文本“Hello World”结束的坐标。那么是否有可能用js或者什么是最优化的方式来获得呢？

谢谢

Answer 1

试试这个：

纯 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);