在JavaScript中进行CSS3转换后，如何获取元素的位置？

在JavaScript中进行CSS3转换后，如何获取元素的位置？

您可以使用

getBoundingClientRect()

：

想象以下html块：

<div >    <div ></div></div>

和样式：

body {    background:#ccc;}.centralizer {    position:absolute;    top:150px;    left:170px;    width:352px;    height:180px;    overflow:auto;    -webkit-transform: translateY(-50%) translateX(-50%);    -moz-transform: translateY(-50%) translateX(-50%);    -ms-transform: translateY(-50%) translateX(-50%);    transform: translateY(-50%) translateX(-50%);}.popup {    background:white;    box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.3);    border-radius:3px;}.dragger {    background:#eee;    height:35px;    border-radius:3px 3px 0 0;    border-bottom:1px solid #ccc;}

现在，您可以使用以下javascript获取正确的位置：

var popup = document.querySelector('.popup');var rect = popup.getBoundingClientRect();console.log("popup.getBoundingClientRect(): n" + "x: " + rect.left + "ny: " + rect.top);

您可以在jsfiddle中检查结果：

我在FF，IE和chrome上进行了测试，并且在我所有的测试中都可以使用。