Дмитрий-(сколько-же-нас?)Прибавьте к 390 ещё 30 скриптом и попробуйте прочесть это значение.
Если свойство стиля определено (установлено), то правило CSS для данного свойства уже не применяется.
В данном примере, при установке значения стиля из JS, элемент таки анимируется, но от текущего значения до значения, жёстко прописанного в стиле (иначе будут неприятные "дёрганья").
Дмитрий-(сколько-же-нас?)Я задал конкретный вопрос:
как в процессе работы страницы, скриптом извлечь полное значение угла поворота дива.
Те же 390 градусов, заданных в css.
Кроме угла поворота, могут быть заданы другие трансформации, поэтому браузеру приходится работать с матрицами.
Попробуйте использовать document.styleSheets... свойства cssRules, cssText, selectorText, style
---------------------------------------------------------------
Ниже тестовый код, и как можно увидеть - текущее значение угла всегда получаем через
matrix
При этом CSS-значение угла 390 никак не относится к текущему положению элемента :)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<style>
#div1 { position:relative; width:100px; height:50px; background:#808080; transition: all 5s ease; }
#div1:hover { transform: rotate(390deg); }
</style>
<script>
function myFunc(d) {
var styles = document.getElementsByTagName('style'); // все стили
var sheet = styles[0].sheet; // первая таблица стилей
var rules = sheet.cssRules; // правила первой таблицы
var style0 = rules[0].style // набор свойств первого правила первой таблицы
var style1 = rules[1].style // набор свойств второго правила первой таблицы
//var property = style[0]; // первое свойство первого правила первой таблицы
var value0 = style0['transition']; // значение
var value1 = style1['transform']; // CSS-значение "rotate(390deg)"
console.log( value0 + ' , ' + value1 );
console.log( document.defaultView.getComputedStyle(d,"").getPropertyValue('transform') );
console.log( document.defaultView.getComputedStyle(d,"hover").getPropertyValue('transform') );
d.style.transform = 'rotate(30deg)';
console.log( document.defaultView.getComputedStyle(d,"").getPropertyValue('transform') );
console.log( document.defaultView.getComputedStyle(d,"hover").getPropertyValue('transform') );
}
</script>
</head>
<body>
<div id="div1" onclick="myFunc(this)">1111111111111</div>
</body>
</html>
