CODEWITHSUNDEEP
javascriptcsspseudo-element
Heiko
Heiko

Reputation: 329

How to retrieve pseudo-element transform-style value with Javascript?

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?

Upvotes: 5

Views: 1177

Answers (2)

Rémi Breton
Rémi Breton

Reputation: 4259

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! ​

Upvotes: 6

Maroshii
Maroshii

Reputation: 4017

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.

Upvotes: 0

Related Questions