javascript - lastChild 的 getBoundingClientRect().x

Question

我当前的代码完美运行:

CSS:

#center
{
    background:#781111;
    color:#fff;
    position:absolute;
    left:50%;
    margin-left:-50px;
    width:100px;
}

#c
{
    position:absolute;
    right:0;
    background:yellow;
    color:#781111;
    width:10px;
}

HTML:

<div id="center">
    <div id="a">a</div>
    <div id="a">b</div>
    <div id="c">c</div>
    &nbsp;
</div>

Javascript:

alert(document.getElementById('center').getBoundingClientRect().x);

现在，到目前为止，一切正常，但是当我尝试像这样获取 lastChild (div#c) 时:

alert(document.getElementById('center').lastChild.getBoundingClientRect().x);

它不能正常工作。

这是我的 jsFiddle: http://jsfiddle.net/hezi_gangina/3m2n9otr/

Answer 1

要获取最后一个子元素，您应该使用 lastElementChild 并获取 BoundingClientRect 的 x 位置，获取左侧属性，如:

var xLastChild = document.getElementById('center').lastElementChild.getBoundingClientRect().left;

http://jsfiddle.net/Pik_at/3m2n9otr/5/