Question

我需要使用JavaScript在网站主体中水平翻转所有文本。我不是在寻找CSS，我只想使用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*/
}

提前致谢

Answer 1

也许您可以使用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 ='rotate（90deg）';

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

1 个答案: