2016-11-24 11 views
-3

Мне нужно использовать JavaScript, чтобы перевернуть все тексты по горизонтали в теле сайта. Я не ищу CSS, я хочу использовать только JavaScript.Как перевернуть текст по горизонтали с помощью JavaScript?

<body>All Texts inside body will flip horizontally</body> 

CSS Кодекс:

.flip { 
-moz-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
transform: scaleX(-1); 
-ms-filter: fliph; /*IE*/ 
filter: fliph; /*IE*/ 
} 

Заранее спасибо

+3

Даже Javascript-подход ** будет использовать CSS. – connexo

+0

Либо манипулировать CSS в JavaScript, либо использовать 'canvas' – nicovank

+0

Так или иначе, мне нужно перевернуть все тексты ТОЛЬКО с помощью JavaScript. Каков ваш совет? –

ответ

0

Может быть, вы могли бы использовать шкалу возможностей style.transform? Он по-прежнему управляет стилем, но не требует встроенного стиля или класса css.

В ActionScript мы использовали для изменения масштаба элемента, чтобы инвертировать/перевернуть его. Я собираюсь изучить это сейчас и посмотреть, могу ли я получить небольшой рабочий код.

Пробовали, масштабирование работает (должен помнить этот):

index.html:

<html> 
    <head> 
    <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body onload="flip_it()"> 
    <div id="flipper">FLIP ME</div> 
    </body> 
</html> 

script.js:

function flip_it() { 
    var elem = document.getElementById ('flipper'); 
    elem.style.transform = 'scaleX (-1)'; // horizontal 
    // elem.style.transform = 'scaleY (-1)'; // vertical 
    // elem.style.transform = 'scale (1, -1) // X and Y 
} 

Единственный побочный эффект, если текст остается оправданным, он переворачивает весь элемент, поэтому теперь он выглядит правильно оправданным. Поэтому измените выравнивание и переверните его (возможно, что я делаю), или центрируйте его, или отрегулируйте ширину элемента (если элемент только такой же широкий, как текст, который он переворачивает на месте, как и следовало ожидать).

Там также поворот особенность преобразования, но я попробовал это быстро, и это, похоже, не «просто работать»:

document.getElementById («yourdiv») .style.transform = «вращать (90deg) ';