如何使用Javascript获取伪元素的transform-style属性值？

Question

Situation:

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

问题：
我需要检索360，以便我可以显示和更改它。
需要一些帮助找到通往360的路径。
有什么建议吗？

- Heiko

Answer 1

我相信在WebKit浏览器中，document.getElementById('XYZ').style.WebkitTransform将返回"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

要将元素与鼠标事件绑定：

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的基础！

- Rémi Breton

---

它可以工作，谢谢，但只能与div一起使用，不能与div:hover一起使用。 有没有可能更改div:hover的样式？ - Heiko

жҲ‘дёҚзҹҘйҒ“еҰӮдҪ•дҪҝз”ЁJavaScriptдҝ®ж”№:hoverж ·ејҸпјҢдҪҶжҳҜдҪ еҸҜд»ҘеңЁе…ғзҙ дёҠз»‘е®ҡ.onmouseoverе’Ң.onmouseoutдәӢ件гҖӮиҜ·жҹҘзңӢжҲ‘зҡ„жӣҙж–°зӯ”жЎҲгҖӮ - Rémi Breton

+1 对于好的回答 - 你不知道如何使用Javascript为所有浏览器设置transform-origin吗？ - Ωmega

@Ωmega：我认为你可以使用element.style.webkitTransformOrigin = "50% 50%";和element.style.mozTransformOrigin = "50% 50%";来做同样的事情。请注意，我没有测试过，而且我不认为你可以在Opera和IE中使用msTransformOrigin和OTransformOrigin...但是，现在还不行。 - Rémi Breton

Answer 2

你需要使用jQuery，但它可能是你正在寻找的东西....

$(document).ready(function(){

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


});

这将返回一个字符串值。你可能应该检查它是否返回360deg或整个内容。 在jQuery和CSS中都删除div。对于jQuery来说，不调用它更快，在CSS中它不会增加特异性。

- Maroshii

---

谢谢，但我对jQuery一无所知。我刚开始学习基本的Javascript，现在正在向前迈进到AJAX。难道没有用简单的Javascript的解决方案吗？ - Heiko

我认为remimbreton的答案是你正在寻找的。 - Maroshii