В этой короткой статье я покажу как можно получить угол наклона элемента на странице.
Угол наклона задается с помощью css свойств, для каждого браузера свое свойство, вот например, поворот на 45 градусов выглядит так:
-webkit-transform: rotate(45deg); /* для хрома и сафари */ -moz-transform: rotate(45deg); /* для FireFox */ -ms-transform: rotate(45deg); /* для IE */ -o-transform: rotate(45deg); /* для оперы */
Чтобы получить угол средствами js нужно получить значение этих свойств, но если попытаться получить значение, то в результате мы получим вот такую строку:
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, 0, 0)
В Этой строке 6 параметров, и ни один из них не является значением угла в градусах. Это матрица, по которой производится искривление элемента.
Первый параметр — это косинус угла, на который сделан поворот. Второй — синус угла, на который сделан поворот, Третий — минус(cos(a)*-1) косинус угла, и четвертый минус синус угла.
Пятый и шестой параметры определяют смещение по вертикали и горизонтали.
Для получения угла нам понадобится только первый и второй параметры, то есть синус и косинус угла. Дальше дело техники, обычная математика. Ниже приведен код для получения угла в градусах:
// функция для определения угла наклона элемента function getDegreeElementById(id_element){ var element = document.getElementById(id_element); var style = window.getComputedStyle(element, null); // получаем значение стилей var valueStyle = style.getPropertyValue("-webkit-transform") || style.getPropertyValue("-moz-transform") || style.getPropertyValue("-ms-transform") || style.getPropertyValue("-o-transform") || style.getPropertyValue("transform"); // если стилей нет, то угол 0 градусов if(valueStyle == 'none') return 0; // разбираем полученное значение console.log(valueStyle); var values = valueStyle.split('(')[1]; values = values.split(')')[0]; values = values.split(','); // получаем синус и косинус var cos = values[0]; var sin = values[1]; // вычисляем угол var degree = Math.round(Math.asin(sin) * (180/Math.PI)); if(cos<0){ addDegree = 90 - Math.round(Math.asin(sin) * (180/Math.PI)); degree = 90 + addDegree; } if(degree < 0){ degree = 360 + degree; } return degree; }
И пример использования:
<style> #test-text-block{ width: 400px; margin: 150px auto 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } </style> <div id="test-text-block">тестовый текст</div>
// пример использования
var degree = getDegreeElementById(‘test-text-block’);
alert(degree);
Хорошая статья! Отличная готовая функция! Взял на вооружение!