getBoundingClientRect() х 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); 

Теперь, Up до этого момента все работает в г отлично, но когда я пытаюсь принести LastChild (Div # с), как это:

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

Это не работает должным образом.

Вот мой jsFiddle: http://jsfiddle.net/hezi_gangina/3m2n9otr/

Answer 1

Чтобы получить последний детский элемент, который вы должны использовать lastElementChild и получить й положение BoundingClientRect получить левую собственность, как:

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

http://jsfiddle.net/Pik_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/