getBoundingClientRect().x of lastChild

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：gangina/3m2n9otr/

Answer 1

要获得最后一个子元素，您应该使用lastElementChild并获得BoundingClientRect get left属性的x位置，如下所示：

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

at/3m2n9otr/5/

Answer 2

第一个问题：lastChild返回任何节点，而不仅仅是HTML元素。#center的最后一个子节点是Text节点(包含 )，而不是Element，因此它没有getBoundingClientRect方法。您可以像这样选择#c：

document.querySelector('#center > *:last-child')

第二个问题：getBoundingClientRect的结果没有x字段。您可以使用left代替：

document.querySelector('#center > *:last-child').getBoundingClientRect().left

http://jsfiddle.net/3m2n9otr/2/