的JavaScript翻转文字水平

我想改变网页的方向，我可以使用CSS方法，如下面更改：的JavaScript翻转文字水平

.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来未翻转仅文本？

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

在此先感谢

来源

2016-11-25 farbon Larseige

只需unflip（是，逆）像'H1，H2 ... H6，P等..内部元素' –

或者你可以选择所有文本节点，而不是将它们翻转，或者换入.do-not-flip元素。选择文本节点http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery –

如何使用JavaScript检测页面中的所有文本，并取消翻转它们？ –

您可以简单地使用CSS来unflip翻转文本。

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

来源

2016-11-25 08:55:09

您的代码基于CSS方法，我们需要将所有类添加到CSS中，并且需要很长时间。我正在寻找像JavaScript这样的最简单的方法来检测页面上的所有文本，并且将其翻转。 –

首先，你需要一些类，这使要素翻转：

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

来源

2016-11-25 14:03:35

的JavaScript翻转文字水平

回答

相关问题