Как получить позицию элемента после перевода css3 в JavaScript?
Я видел, что это было опубликовано в двух разных формах в stackoverflow, но решения для меня не работают.
По сути, у меня есть предмет, который я буду переводить. Когда я делаю obj.style.left или obj.offsetLeft, после того, как элемент был переведен, я получаю 0. В любом случае я могу получить координаты/позицию элемента после того, как он был переведен с помощью css3?
Я не могу использовать jQuery (потому что не могу, а также потому, что хочу понять решение, а не просто использовать библиотеку, не понимая, что происходит внизу)
Любые идеи?
Спасибо большое!
Ответы
Ответ 1
Хорошо, держись, потому что это не приятно:
window.addEventListener('load', function(){
var node = document.getElementById("yourid");
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
console.log(node.offsetLeft + curTransform.m41); //real offset left
console.log(node.offsetTop + curTransform.m42); //real offset top
});
Вы можете играть здесь:
http://jsfiddle.net/duopixel/wzZ5R/
Ответ 2
Вы можете использовать getBoundingClientRect()
:
Представьте себе следующий html-блок:
<div class="centralizer popup">
<div class="dragger"></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 и хром, и он работал на всех моих тестах.