javascript - 如何使用 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)"。您可以为 Firefox 3.1+ 使用 style.MozTransform，为 IE9+ 使用 style.msTransform，为 Opera 使用 style.OTransform。

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

用鼠标事件绑定(bind)元素:

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 根源!