Question

我想改变网页的方向，我可以使用下面的CSS方法更改它：

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

并将类翻转添加到正文部分中，如下所示：

    <body class="flip">

如您所知，页面将完全水平翻转，问题是页面中的文本， 我们无法读取 ，我正在寻找一种解决方案，在页面中使用 JavaScript到UN-FLIP ONLY TEXTS 。我的意思是只有文字会恢复正常。

无论如何使用JavaScript来仅翻转页面中的文本吗？

我非常感谢您对此问题的帮助。

提前致谢

Answer 1

您可以简单地使用CSS来解除翻转的文本。

＆＃13;

.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
  border: 3px dashed red;
}
.flip>p {
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
}

＆＃13;

<main class="flip">
  <p>FLIPPING? NO!</p>
</main>

＆＃13;

Answer 2

首先你需要一些使元素翻转的类：

.flip {
    transform: scaleX(-1);
}

然后让我们将这个类添加到没有子元素的每个元素中（这是查找仅包含文本的元素的简单方法）：

Array.prototype.slice.call(document.querySelectorAll("body *"))
    .filter(ele => ele.children.length === 0)
    .forEach(e => e.className += " flip");

现在我们只需要将此类添加到body，就是这样：

document.body.className += " flip";

请注意，这种方式不会翻转文本节点，因为它们不是元素，也不能有类。如果您有文本节点，我的建议是将它们包装在<span>中。请参阅how to get text nodes的答案。

所以只有js的解决方案是：

document.head.innerHTML += "<style>.flip{transform: scaleX(-1);}</style>";

Array.prototype.slice.call(document.querySelectorAll("body *"))
    .filter(ele => ele.children.length === 0)
    .forEach(e => e.className += " flip");

document.body.className += " flip";

JavaScript可以水平翻转文本

2 个答案: