Como obtenho os valores reais para esquerda / direita / superior / inferior de um elemento absolutamente posicionado?
(Parece uma pergunta simples que já teria sido feita antes, mas, se houver, não a encontro, embora existam muitas semelhantes que não respondem ao que eu quero.)
No Firefox (24.0), esse código me dá o que eu quero - o número relevante de pixels:
jQuery('selector').css('right')
No Chrome (34.0.1847.137 m), ele fornece apenas pixels para esquerda / parte superior, mas retornaauto
para direita / inferior.
Existem várias perguntas sobre o SO que explicam que esse é o comportamento esperado de .css, mas não consigo encontrar nada que explique como obter o comportamento desejado - ou seja, forneça valores de pixel calculados para todos os quatro valores.
JS ou jQuery têm alguma maneira de obter diretamente esses quatro valores, que funcionam consistentemente em todos os navegadores / cenários? (Ou tenho que recorrer a feios cálculos manuais?)
Esclarecimento:
Preciso de valores equivalentes ao.css('right')
valores que o Firefox retorna - que é a distância entre as bordas direitas do elemento atual e do pai. Não é o mesmo que definições de largura + esquerda relativa à janela de visualização que algumas funções retornam.
ou seja, os valores registrados aqui devem ser numericamente iguais:
elem = jQuery('selector')
rect = someFunction( elem[0] );
console.log([ elem.css('left') , rect.left ]);
console.log([ elem.css('right') , rect.right ]);
console.log([ elem.css('top') , rect.top ]);
console.log([ elem.css('bottom') , rect.bottom ]);
A menos que eu esteja interpretando mal as outras respostas, apenasresposta getRelativeClientRect de kalley atende a esse critério.