如何使用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会"rotate(360deg)"在WebKit浏览器中返回.你可以使用style.MozTransformFirefox 3.1 style.msTransform+,IE9 +,style.OTransformOpera.

资料来源: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根源!