如何使用 Javascript 检索伪元素转换样式值？

发布于 2025-01-08 01:42:09 字数 303 浏览 0 评论 0原文

情况：

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

问题：
我需要检索 360 来显示和更改它。需要一些帮助来帮助我找到 360 的路径。
有什么想法吗？

原文

Situation:

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

Question:
I need to retrieve the 360 therewith I can display and change it.
Need some help with the path that leads me to the 360.
Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

菩提树下叶撕阳。 2025-01-15 01:42:10

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

$(document).ready(function(){

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


});

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

You're gonna need jQuery but it might be what you are looking for....

$(document).ready(function(){

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


});

This return the value as a string. You probably should check if it returns 360deg or the whole thing.
Drop the div for both jQuery and CSS. For jQuery is faster not to call it and in CSS it doesn't add specificity.

回复收藏 0 原文

暗藏城府 2025-01-15 01:42:09

我相信 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 根源！

I believe document.getElementById('XYZ').style.WebkitTransform will return "rotate(360deg)" in WebKit browsers. You can use style.MozTransform for Firefox 3.1+, style.msTransform for IE9+, style.OTransform for Opera.

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

To bind element with mouse events:

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)';
}

It might be simpler with jQuery, but you've got to know your JavaScript roots!

回复收藏 0 原文

~没有更多了~