資料結構
網路
關係資料庫管理系統 (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 次瀏覽
