JavaScript水平翻转文本

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来取消对页面中仅文本的翻转 。 我的意思是只有文本会恢复正常。

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

非常感谢您在此问题上的帮助。

提前致谢

Answer 1

您可以简单地使用CSS取消翻转文本。

 .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; }

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

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> 。 有关如何获取文本节点的信息，请参见答案。

因此，仅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 个解决方案

解决方案1
2 2016-11-25 08:55:09

解决方案2
0 2016-11-25 14:03:35

JavaScript水平翻转文本

问题描述

2 个解决方案

解决方案1 2 2016-11-25 08:55:09

解决方案2 0 2016-11-25 14:03:35

解决方案1
2 2016-11-25 08:55:09

解决方案2
0 2016-11-25 14:03:35