Как получить значение стиля преобразования псевдоэлемента с помощью Javascript? - PullRequest
Новая
       3

Как получить значение стиля преобразования псевдоэлемента с помощью Javascript?

5 голосов
/ 21 февраля 2012

Ситуация: 

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

Вопрос:
Мне нужно получить 360 , при этом я могу отобразить и изменить его,Нужна помощь с путем, который ведет меня к 360.
Есть идеи?

Ответы [ 2 ]

6 голосов
/ 21 февраля 2012

Я полагаю, document.getElementById('XYZ').style.WebkitTransform вернет "rotate(360deg)" в браузерах WebKit.Вы можете использовать style.MozTransform для Firefox 3.1+, style.msTransform для IE9 +, style.OTransform для Opera.

Источник: 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!

0 голосов
/ 21 февраля 2012

Вам понадобится jQuery, но это может быть то, что вы ищете .... 

$(document).ready(function(){

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


});

Возвращает значение в виде строки. Вы, вероятно, должны проверить, возвращает ли он 360deg или все это. Удалите div для jQuery и CSS. Поскольку jQuery быстрее не вызывать его, а в CSS это не добавляет специфичности.

...