翻转水平CSS并使用基于RTL Direction的JavaScript将其反转

本文介绍了翻转水平CSS并使用基于RTL Direction的JavaScript将其反转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要将整个网页的LTR方向更改为RTL方向，这是翻转水平CSS的最简单方法，然后将class添加到页面的每个元素部分以使其成为RTL方向。这是我的CSS代码：

I'm going to change LTR direction of whole web page to RTL direction, the easiest way it's flip horizontal css and then add class to each element section of page to make it as RTL direction. Here is my CSS code:

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

<body class="rtl">

然后我们需要在页面的每个元素上添加rtl类，使其成为真实的RTL，例如：

then we need to add rtl class to each element of page to make it as real RTL, for example:

<div class="rtl">Text Here</div>  => Real RTL Direction

现在这是我的问题：

如果有任何解决方案都可以使用JavaScript将主体的方向更改为RTL，然后无需向网站的每个部分添加水平翻转类。
当前改变方向的唯一方法是我们向每个文本部分和图像部分元素fiv，span，p等添加类

If there's any solution to change direction of body to RTL with JavaScript, then no need to add class of flip horizontal to each section of website. Currently the only way to change direction is that we add class to each texts sections and image sections elements fiv, span, p, and etc

我尝试了HTML方向RTL和主体RTL，但不起作用，我相信，如果我们能够将主体方向强制为RTL并水平翻转，则可以解决。

I tried HTML direction RTL and body RTL, but not working, I believe if we will be able to force body direction to RTL and flip horizontal then it can be solved.

我非常感谢这个问题中的任何评论和想法。

I highly appreciate any comment and idea in this question.

推荐答案

当我强制正文显示 dir = rtl 时，此方法有效或 dir = ltr 。对于 flip ，我使用您的CSS并将 * 用作选择器，同时选择所有元素。检查一下：

It works when i force body to show either dir=rtl or dir=ltr. And for flip, i use your css and put * as the selector too select all element. check this out:

var b = document.getElementsByTagName("body")[0];
b.setAttribute("dir", "rtl");
/* b.setAttribute("dir", "ltr"); */
console.log(b);

<h1> Hello world </h1>
<div> Text Here</div>
<p>lorem ipsum lorem ipsum lorem ipsum</p>

有关此的更多信息：文字方向的CSS技巧

如果要翻转所有元素，可以添加以下内容：

in case you want to flip all element can add this:

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

但是如果您的意思是：来自 Hello world ，您希望它显示为 dlol olleH
，您可以尝试以下操作：

But if you means: from Hello world you want it to appear as dlrow olleHyou can try this one:

var ns = document.body.childNodes;
ns.forEach(function(elm) {
  if (elm.innerText && elm.nodeName !== "SCRIPT") {
    //set array of char then re-arrange char
    var arr = elm.innerText.split(''),
      temp = [];
    for (var i = 0, l = x = arr.length - 1; i <= l; i++, x--) {
      temp[i] = arr[x];
    }
    elm.innerText = temp.join('')
  }
})

<h1> Hello world </h1>
<div>Text Here</div>
<p>lorem ipsum<span> span </span>lorem ipsum lorem ipsum</p>

这篇关于翻转水平CSS并使用基于RTL Direction的JavaScript将其反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！