如何使用JavaScript水平翻转文本？

-3

我需要使用JavaScript来翻转网站正文中的所有文本。我不是在寻找CSS，我只想使用JavaScript。如何使用JavaScript水平翻转文本？

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

CSS代码是：提前

来源

2016-11-24 farbon Larseige

即使是基于Javascript的方法**也会使用CSS。 – connexo

要么在JavaScript中操纵CSS，要么使用“canvas” – nicovank

无论如何，我只需要使用JavaScript翻转所有文本。你有什么建议？ –

也许你可以使用style.transform的规模能力

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

感谢？它仍然操纵一种风格，但不需要内联风格或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 =“旋转（90度）';

来源

2016-11-24 20:14:40

如何使用JavaScript水平翻转文本？

回答

相关问题