我试图在180度内旋转所有字母,数字和符号,简单地说,我指的是颠倒的文本。但是代码不起作用,我想做的是用这段代码做什么?
备注:我想旋转写在TextArea中的文本,而不是旋转TextArea。
代码:
<!DOCTYPE html>
<html>
<body>
<form>
<textarea id="textArea1" style="height: 100px; width: 468px;"></textarea><br />
<br />
<input onclick="myFunction()" type="button" value="Flip Text" /><br />
<br />
<textarea id="textArea2" style="height: 100px; width: 468px;"></textarea>
</form>
<script>
function myFunction() {
document.getElementById("textArea2").value = document.getElementById("textArea1").css('transform', 'rotate(180deg)');
}
</script>
</body>
</html>发布于 2020-07-27 06:27:27
将功能内容更改为
document.getElementById("textArea2").value = document.getElementById("textArea1").css('transform', 'rotate(180deg)');至
document.getElementById("textArea1").style.transform = 'rotate(180deg)';发布于 2020-07-27 06:34:16
在您的textarea中,style=""将转换属性添加为
<textarea id="textArea1" style="height: 100px; width: 468px; transform: rotate(180deg)"></textarea><br />您要求按一下按钮,您必须旋转,所以在clickFunction下面,您可以添加一行如下:
clickFunction(){
document.getElementById('textArea1').style.transform = 'rotate(180deg)';
}发布于 2020-07-27 07:14:02
function myFunction() {
document.getElementById('rotatedText').innerText = document.getElementById("inputArea").value;
}#rotatedText {
width: 468px;
border: 1px solid #000;
margin-top: 5px;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}<!DOCTYPE html>
<html>
<body>
<form>
<textarea id="inputArea" style="height: 100px; width: 468px;">I AM READY TO FLIP.</textarea>
<br/>
<input onclick="myFunction()" type="button" value="Flip Text" />
<br />
<div id="rotatedText" contenteditable="true"> </div>
</form>
</body>
</html>
https://stackoverflow.com/questions/63109667
复制相似问题