lastChild 的 getBoundingClientRect().x答案

【问题标题】：getBoundingClientRect().x of lastChildlastChild 的 getBoundingClientRect().x
【发布时间】：2015-04-30 13:21:15
【问题描述】：

我当前的代码运行良好：

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/

【问题讨论】：

标签： javascript html css getboundingclientrect

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：