Форум

Аленький цветочек · #1 (**permalink**) 09.01.2014, 23:54

Есть 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 · #2 (**permalink**) 10.01.2014, 00:19

Сообщение от Аленький цветочек

Что я делаю не так?

Тут, как бы, смотря, что вообще делаешь. Ибо, по представленному коду, вообще не понятно. Могу только сказать, что .getPropertyValue принимает только один аргумент.
Если я правильно понимаю, нужно что-то типа того:

document.getElementById('text')
    .style.transform = 'rotate(15deg)';

Faab · #3 (**permalink**) 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)';

Ссылка

Аленький цветочек · #4 (**permalink**) 10.01.2014, 00:24

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

Аленький цветочек · #5 (**permalink**) 10.01.2014, 00:25

Фигню написала, только что )))

Аленький цветочек · #6 (**permalink**) 10.01.2014, 00:30

Uncaught TypeError: Cannot read property 'style' of null
Не работает((((

Faab · #7 (**permalink**) 10.01.2014, 00:30

Сообщение от Аленький цветочек

Фигню написала, только что )))

Мило. Но в 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 · #8 (**permalink**) 10.01.2014, 00:31

Сообщение от Аленький цветочек

Uncaught TypeError: Cannot read property 'style' of null
Не работает((((

У меня всё работает. Какой у вас браузер и выложите весь скрипт пожалуйста.

Аленький цветочек · #9 (**permalink**) 10.01.2014, 00:33

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

Аленький цветочек · #10 (**permalink**) 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

Форум

Справочник

Discord чат

Курсы javascript