如何使用Javascript檢索偽元素轉換樣式的值？

Question

情況：

div.xy:hover {
  transform: all rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

題：
我需要使用它來檢索360並進行顯示和更改。 在將我引向360度的道路上需要一些幫助。
有任何想法嗎？

Answer 1

我相信document.getElementById('XYZ').style.WebkitTransform將在WebKit瀏覽器中返回"rotate(360deg)" 。 您可以將style.MozTransform用於Firefox 3.1+，將style.msTransform用於IE9 +，將style.OTransform用於Opera。

來源： http ： //www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

要將元素與鼠標事件綁定：

var e = document.getElementById('test') // Your div ID

e.onmouseover = function(){
    var degree = 360; // Rotation on :hover
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}
e.onmouseout = function(){
    var degree = 0; // Initial rotation
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}

使用jQuery可能更簡單，但是您必須了解JavaScript的根！

Answer 2

您將需要jQuery，但這可能正是您想要的...。

$(document).ready(function(){

$(".xy:hover").css("transform")


});

這將值作為字符串返回。 您可能應該檢查它是否返回360deg或整個物體。 刪除jQuery和CSS的div 。 對於jQuery來說，不調用它更快，並且在CSS中不會增加特異性。