Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение transform (https://javascript.ru/forum/misc/44180-izmenenie-transform.html)

Аленький цветочек 09.01.2014 23:54
Изменение transform
 
Есть div с тектом. Необходимо повернуть тект на заданный угол, те изменить transform, без jquery
<div id="text">Текст</div>

CSS:
Код:
#text{ 
    transform: rotate(0deg);
    position: absolute;
}
Делаю так:
var text = document.getElementById('text');
    var style1 = window.getComputedStyle(text,null);
    var top = style1.getPropertyValue('transform', 'rotate(15deg)');


Что я делаю не так? Извиняюсь за тупой вопрос.

BallsShaped 10.01.2014 00:19
Цитата:
Сообщение от Аленький цветочек
Что я делаю не так?
Тут, как бы, смотря, что вообще делаешь. Ибо, по представленному коду, вообще не понятно. Могу только сказать, что .getPropertyValue принимает только один аргумент.
Если я правильно понимаю, нужно что-то типа того:
document.getElementById('text')
    .style.transform = 'rotate(15deg)';

Faab 10.01.2014 00:20 
var eText = document.getElementById('text');
    eText.style.MozTransform = 'rotate(45deg)';
    eText.style.WebkitTransform = 'rotate(45deg)';
    eText.style.OTransform = 'rotate(45deg)';
    eText.style.MsTransform = 'rotate(45deg)';
    eText.style.transform = 'rotate(45deg)';


Ссылка

Аленький цветочек 10.01.2014 00:24
вначале я так и пробовала, но с transform такой номер не проходит. Ведь это не просто стиль типа color, а что-то вроде метода (тут могу лажать), у него есть куча вариантов rotate, scale...

Аленький цветочек 10.01.2014 00:25
Фигню написала, только что )))

Аленький цветочек 10.01.2014 00:30
Uncaught TypeError: Cannot read property 'style' of null
Не работает((((

Faab 10.01.2014 00:30
Цитата:
Сообщение от Аленький цветочек (Сообщение 291372)
Фигню написала, только что )))
:)


Мило. Но в css вам так и так надо прописывать все префиксы:
<style>
            -moz-transform: rotate(-0deg);
            -webkit-transform: rotate(-0deg);
            -o-transform: rotate(-0deg);
            -ms-transform: rotate(-0deg);
            transform: rotate(-0deg);
            position: absolute; 
</style>


Просто, подставьте везде переменную вместо чисел и работы поубавиться, если вам снова понадобиться наклонить текст.

Faab 10.01.2014 00:31
Цитата:
Сообщение от Аленький цветочек (Сообщение 291373)
Uncaught TypeError: Cannot read property 'style' of null
Не работает((((
У меня всё работает. Какой у вас браузер и выложите весь скрипт пожалуйста.

Аленький цветочек 10.01.2014 00:33
Просто, подставьте везде переменную вместо чисел и работы поубавиться, если вам снова понадобиться наклонить текст.
Ну я ж не совсем блондина. Как-то даже обидно стало.

Аленький цветочек 10.01.2014 00:35
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#text{
-moz-transform: rotate(-0deg);
-webkit-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
-ms-transform: rotate(-0deg);
transform: rotate(-0deg);
}
</style>
</head>
<body>
<div id="text">Мур</div>
<script type="text/javascript">
function func(){
var eText = document.getElementById('text');
eText.style.MozTransform = 'rotate(45deg)';
eText.style.WebkitTransform = 'rotate(45deg)';
eText.style.OTransform = 'rotate(45deg)';
eText.style.MsTransform = 'rotate(45deg)';
eText.style.transform = 'rotate(45deg)';
}
func();
</script>
</body>
</html>
Не работает((( А должно Uncaught TypeError: Cannot read property 'style' of null

Faab 10.01.2014 00:56
Добавьте в стили position: absolute;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#text{
-moz-transform: rotate(-0deg);
-webkit-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
-ms-transform: rotate(-0deg);
transform: rotate(-0deg);
position: absolute;
}
</style>
</head>
<body>
<div id="text">Силой мысли я перевернусь </div>
<script type="text/javascript">
window.onload = function(){
  var eText = document.getElementById('text');
  eText.style.MozTransform = 'rotate(45deg)';
  eText.style.WebkitTransform = 'rotate(45deg)';
  eText.style.OTransform = 'rotate(45deg)';
  eText.style.MsTransform = 'rotate(45deg)';
  eText.style.transform = 'rotate(45deg)';
}
</script>
</body>
</html>


Цитата:
Сообщение от Аленький цветочек (Сообщение 291376)
Ну я ж не совсем блондина. Как-то даже обидно стало.
Не хотел обидеть, просто не понял почему вы отказались от style.transform = ".."

Аленький цветочек 10.01.2014 01:14
Faab,
Он повернулся. Ураааааа. Странно, но пока я не сделала window.onload = function(){...} вместо своего function func(){...} func(); работать не хотело. Спасибо вам огромное. Уииииии

Аленький цветочек 10.01.2014 01:17
Faab,
Если можно, объясните почему не сработало function func(){...} func();

Faab 10.01.2014 01:23
Я предполагаю что id="text" ещё не успевает "загрузится" в DOM-дерево (паршивенько сказано конечно, но смысл вы поймёте. ). Если хотите проверить просто вставьте следующую строчку и вы увидите так ли это.

var eText = document.getElementById('text');
  console.log(eText); // эту строку нужно вставить
  eText.style.MozTransform = 'rotate(45deg)';



Хотя была бы ошибка. Но у меня работает и по вашему: 
function func(){
  var eText = document.getElementById('text');
  console.log(eText);
  eText.style.MozTransform = 'rotate(45deg)';
  eText.style.WebkitTransform = 'rotate(45deg)';
  eText.style.OTransform = 'rotate(45deg)';
  eText.style.MsTransform = 'rotate(45deg)';
  eText.style.transform = 'rotate(45deg)';
}
func();

Аленький цветочек 10.01.2014 01:34
Faab,
Еще раз огромное спасибо!!!! Профессор :)


Часовой пояс GMT +3, время: 22:06.