数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用 JavaScript 更改 textarea 的形状？
Textarea 是一种具有动态宽度和高度的文本框，这意味着当在其中输入文本时，文本不会溢出，只会包含在这个 textarea 中，因为它可以动态增加或减少其高度和宽度。Textarea 主要用于表单中，以获取用户的完整地址和其他一些较长的文本内容。
通常，Textarea 的形状为方形或矩形，可以使用 JavaScript 和 CSS 来更改其形状。在本文中，我们将学习使用 JavaScript 更改 textarea 形状的方法。
要使用 JavaScript 更改 textarea 的形状，我们可以使用不同的 CSS 属性和不同的值来将 textarea 塑造成不同的结构。
将 textarea 更改为平行四边形
要将 textarea 的形状更改为平行四边形，我们可以在 JavaScript 中使用 CSS 的 `style.transform` 属性，其值为 `skew()`。
语法
下面的语法将帮助您理解如何使用上述方法更改 textarea 的形状：
selected_textarea.style.transform = "skew(40deg)";
让我们通过在代码示例中实际实现它来详细了解它，看看它如何更改 textarea 的形状。
算法
**步骤 1** - 在第一步中，我们将一个 textarea 添加到 HTML 文档中，稍后我们将使用 JavaScript 更改其形状。
**步骤 2** - 在这一步中，我们将添加一个按钮元素，并将其与 onclick 事件关联，稍后当按钮被点击时，该事件将调用一个函数并更改 textarea 的形状。
**步骤 3** - 在下一步中，我们将定义一个 JavaScript 函数，在这个函数中，我们将获取 textarea 元素并使用上面编写的语法将其形状更改为平行四边形。
**步骤 4** - 在最后一步中，我们将 JavaScript 函数赋值给按钮的 onclick 事件，以便稍后当按钮被点击时可以调用该函数。
示例
下面的示例将向您解释使用 CSS 的 `transform` 属性将 textarea 的形状更改为平行四边形的方法：
<html>
<body>
<h2>Change the shape of a textarea</h2>
<p id = "upper">The shape of below textarea will be changed once you click the button.</p>
<textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
<button id = "btn" onclick = "changeShape()">Click to change the shape</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
function changeShape() {
var textar = document.getElementById('textar');
textar.style.transform = "skew(50deg)";
upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
result.innerHTML += " The shape of the textarea is changed to parallelogram using style.transform = 'skew(50deg)'";
}
</script>
</body>
</html>
在上面的示例中，我们使用了 `transform` 属性和 `skew()` 值将 textarea 的形状更改为平行四边形。
将 textarea 形状更改为椭圆形
要将 textarea 的形状更改为椭圆形，我们可以在 JavaScript 中使用 CSS 的 `borderRadius` 属性，其值为 50%。
语法
可以使用以下语法将 textarea 的形状更改为椭圆形，使用 `borderRadius` 属性：
selected_textarea.style.borderRadius = "50%";
让我们看看此方法的实际实现以了解其工作原理。
算法
此示例的算法与前一个示例的算法几乎相同。您只需要进行一些小的更改，将前一个示例中的 `transform` 属性替换为 `borderRadius` 属性，并将其值设置为 `50%`，即可获得椭圆形的 textarea。
示例
下面的示例将说明使用 `borderRadius` 将 textarea 的形状更改为椭圆形：
<html>
<body>
<h2>Change the shape of a textarea to an ellipse</h2>
<p id = "upper">The shape of below textarea will be changed once you click the button.</p>
<textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
<button id = "btn" onclick = "changeShape()">Click to change the shape</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
function changeShape() {
var textar = document.getElementById('textar');
textar.style.borderRadius = "50%";
upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
result.innerHTML += " The shape of the textarea is changed to ellipse using style.borderRadius = '50%'";
}
</script>
</body>
</html>
在上面的示例中，我们使用 JavaScript 和 `borderRadius` 属性将 textarea 的形状从矩形更改为椭圆形。
在本文中，我们详细讨论了两种将 textarea 的形状更改为两种不同形状的不同方法，并为每种方法提供了代码示例。使用 JavaScript 中的其他 CSS 属性也可能将 textarea 的形状更改为其他形状，因此请继续搜索和学习。
332 次浏览
