ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Узнать реальный угол поворота дива
13 сообщений из 38, страница 2 из 2
  2  все
(JS) Узнать реальный угол поворота дива
    #39432320
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Дмитрий-(сколько-же-нас?)Прибавьте к 390 ещё 30 скриптом и попробуйте прочесть это значение.
Если свойство стиля определено (установлено), то правило CSS для данного свойства уже не применяется.
В данном примере, при установке значения стиля из JS, элемент таки анимируется, но от текущего значения до значения, жёстко прописанного в стиле (иначе будут неприятные "дёрганья").

Дмитрий-(сколько-же-нас?)Я задал конкретный вопрос:
как в процессе работы страницы, скриптом извлечь полное значение угла поворота дива.

Те же 390 градусов, заданных в css.
Кроме угла поворота, могут быть заданы другие трансформации, поэтому браузеру приходится работать с матрицами.

Попробуйте использовать document.styleSheets... свойства cssRules, cssText, selectorText, style

---------------------------------------------------------------

Ниже тестовый код, и как можно увидеть - текущее значение угла всегда получаем через matrix
При этом CSS-значение угла 390 никак не относится к текущему положению элемента :)

Код: html
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>
...
Рейтинг: 0 / 0
03.04.2017, 20:05
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432322
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
браузер запоминает значение стиля, какое бы оно ни было. но это не значит, что он хранит "количество оборотов".

получай значение угла из стиля, дели на 360 - вот тебе и количество оборотов.
...
Рейтинг: 0 / 0
03.04.2017, 20:11
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432329
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Antonariyбраузер запоминает значение стиля, какое бы оно ни было. но это не значит, что он хранит "количество оборотов".

получай значение угла из стиля, дели на 360 - вот тебе и количество оборотов.
при этом не факт, что DIV успел повернуться до указанного в CSS значения
(в примере скорость анимации намеренно уменьшена - общее время увеличено до 5s)
...
Рейтинг: 0 / 0
03.04.2017, 20:19
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432336
Дмитрий-(сколько-же-нас?)
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий-(сколько-же-нас?)
Гость
бухалтер фантоцциAntonariyбраузер запоминает значение стиля, какое бы оно ни было. но это не значит, что он хранит "количество оборотов".

получай значение угла из стиля, дели на 360 - вот тебе и количество оборотов.
при этом не факт, что DIV успел повернуться до указанного в CSS значения
(в примере скорость анимации намеренно уменьшена - общее время увеличено до 5s)

Совершенно верно!

"Получай значение из стиля" — как???
...
Рейтинг: 0 / 0
03.04.2017, 20:26
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432342
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Дмитрий-(сколько-же-нас?)"Получай значение из стиля" — как???
в примере прописано как, только это ничего не даст - там тупое CSS-правило "rotate(390deg);".

бухалтер фантоцци В данном примере, при установке значения стиля из JS, элемент таки анимируется, но от текущего значения до значения, жёстко прописанного в стиле (иначе будут неприятные "дёрганья").
Логично, что такие нюансы работы и внутренней реализации, браузер никак не показывает, если это не прописано в стандарте,
иначе будет кто во что горазд - куча несовместимостей между браузерами.
...
Рейтинг: 0 / 0
03.04.2017, 20:35
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432344
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
P.S. Другими словами - или пусть крутит браузер, или нужно крутить самому и считать обороты.
...
Рейтинг: 0 / 0
03.04.2017, 20:39
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432348
Дмитрий-(сколько-же-нас?)
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий-(сколько-же-нас?)
Гость
бухалтер фантоцци,

Я, по-любому, кручу.
Да, сейчас добавил переменную для запоминания угла, однако, в случае плавного поворота, проблему это решает не до конца.
Мне кажется, что "добыть" этот угол, таки можно, но не стоит потраченного времени.

Спасибо!
...
Рейтинг: 0 / 0
03.04.2017, 20:43
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432356
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Дмитрий-(сколько-же-нас?),

Ещё подумалось про CSS-variables (последние версии браузеров их поддерживают).

Возможно, в Вашем случае через CSS-переменные будет менее накладно по ресурсам.

Вот тестовый пример, как можно их заюзать
 
Использование CSS-переменных
Код: html
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.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS-variables test</title>
<style>
* {
  color: black;
}
:root { /* CSS-variables */
  --color-1: red;
  --color-2: green;
}
.class1 {
  color: var(--color-1);
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){setTimeout(init,100)}, false);

function init() { /* Выполняется при готовности web-страницы */
  var d = document.defaultView,
      de = document.documentElement,
      div = document.querySelector('.class1');

  /* Сравниваем результаты для объекта class1  и  глобального объекта */
  alert('class1:' + getStyle(div, '--color-1') + '\nroot:' + getStyle(de, '--color-1'));

  /* Меняем значение CSS-переменной, наследуемой в объекте класса class1 */
  div.style.setProperty('--color-1', 'var(--color-2)');

  /* Сравниваем результаты для объекта class1  и  глобального объекта */
  alert('class1:' + getStyle(div, '--color-1') + '\nroot:' + getStyle(de, '--color-1'));
};

function getStyle(obj, style) {
   return document.defaultView.getComputedStyle(obj).getPropertyValue(style);
}
</script>
</head>
<body>
  <div class="class1">div_class1_text</div>
  body_text
</body>
</html>

...
Рейтинг: 0 / 0
03.04.2017, 20:52
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432361
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Дмитрий-(сколько-же-нас?) Мне кажется , что "добыть" этот угол, таки можнопрогресс. было-то "постулат и очевидно".
...
Рейтинг: 0 / 0
03.04.2017, 21:06
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432364
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
http://frontender.info/css-variables-why-should-you-care/
...
Рейтинг: 0 / 0
03.04.2017, 21:08
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432366
Дмитрий-(сколько-же-нас?)
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дмитрий-(сколько-же-нас?)
Гость
бухалтер фантоцци,

Спасибо.
Пока, пробую без переменных.


Antonariy,

Что смущает?
И "постулат" и "очевидность" остались без изменений, как и возможность "добыть" этот угол из "недр" (ищу возможность уже пол-года, как).
...
Рейтинг: 0 / 0
03.04.2017, 21:10
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432368
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
вадя http://frontender.info/css-variables-why-should-you-care/
меня кстати удивляет, что до сих пор мало внимания к CSS-переменным (или мне так кажется),
это-же очень сильное и удобное средство, которое делает из CSS-препроцессоров (SASS, LESS) древних мамонтов...
...
Рейтинг: 0 / 0
03.04.2017, 21:12
| Ответить | Цитировать | Написать  
(JS) Узнать реальный угол поворота дива
    #39432378
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
бухалтер фантоццивадя http://frontender.info/css-variables-why-should-you-care/
меня кстати удивляет, что до сих пор мало внимания к CSS-переменным (или мне так кажется),
это-же очень сильное и удобное средство, которое делает из CSS-препроцессоров (SASS, LESS) древних мамонтов...
еслиб не ты я б не знал....
счас буду учится использовать
...
Рейтинг: 0 / 0
03.04.2017, 21:33
| Ответить | Цитировать | Написать  
13 сообщений из 38, страница 2 из 2
  2  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Узнать реальный угол поворота дива
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]