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

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

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

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

источник

2012-02-21 Heiko

Примите, пожалуйста? –

Я считаю, что 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!

источник

2012-02-21 04:25:54

Это работает, спасибо, но только с div, а не с div: hover. Любая возможность изменить div: стиль наведения? – Heiko

Я не знаю, как изменить стиль элемента ': hover' с помощью' JavaScript', но вы могли бы связывать события '.onmouseover' и' .onmouseout' над элементом. См. Мой обновленный ответ. –

+1 для приятного ответа. Разве вы не знаете, как установить «transform-origin» для всех браузеров с помощью Javascript, пожалуйста ...? –

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

$(document).ready(function(){ 

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


});

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

источник

2012-02-21 09:07:42 Maroshii

Спасибо, но я ничего не знаю о jQuery. Просто начал с базового Javascript и теперь перешел на AJAX. Нет ли решения с простым Javascript? – Heiko

Я думаю, что ответ Remimbreton - это то, что вы ищете – Maroshii

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

ответ

Смежные вопросы