如何使用 Javascript 检索伪元素变换样式值？答案

【问题标题】：How to retrieve pseudo-element transform-style value with Javascript?如何使用 Javascript 检索伪元素变换样式值？
【发布时间】：2012-02-21 03:19:23
【问题描述】：

情况：

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

问题：
我需要检索 360 以显示和更改它。在通往 360 的道路上需要一些帮助。
有什么想法吗？

【问题讨论】：

标签： javascript css pseudo-element

【解决方案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

用鼠标事件绑定元素：

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

【讨论】：

它有效，谢谢，但仅适用于 div，不适用于 div:hover。是否有可能更改 div:hover 样式？
我不知道用JavaScript 修改元素:hover 样式的方法，但是您可以在元素上绑定.onmouseover 和.onmouseout 事件。请参阅我的更新答案。
+1 得到很好的答案 - 你不知道如何为所有使用 Javascript 的浏览器设置 transform-origin，拜托...？
@Ωmega：我认为您可以使用element.style.webkitTransformOrigin = "50% 50%"; 和element.style.mozTransformOrigin = "50% 50%"; 做同样的事情。请注意，我没有对其进行测试，而且我认为您不能为 Opera 和 IE 执行 msTransformOrigin 和 OTransformOrigin ......但是。

【解决方案2】：

您将需要 jQuery，但它可能正是您正在寻找的......

$(document).ready(function(){

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


});

这会将值作为字符串返回。您可能应该检查它是否返回 360deg 或整个事情。删除 jQuery 和 CSS 的 div。因为 jQuery 不调用它会更快，并且在 CSS 中它不会添加特异性。

【讨论】：

谢谢，但我对 jQuery 一无所知。刚从基本的 Javascript 开始，现在就转向 AJAX。没有简单的Javascript解决方案吗？
我认为 remimbreton 的答案就是你要找的