JavaScript を使用してテキスト領域の形状を変更するにはどうすればよいですか?

Textarea は、動的な幅と高さを持つボックスです。つまり、テキストを入力しても、テキストはオーバーフローせず、その texarea 内にのみ含まれます。これは、動的に増加または増加できるためです。高さと幅を減らします。 Textarea は主にフォーム内で、ユーザーの完全なアドレスや、大きなテキスト コンテンツを含むその他のコンテンツを取得するために使用されます。

通常、テキスト領域は正方形または長方形の形をしていますが、JavaScript と CSS を使用して変更できます。この記事では、JavaScript を使用してテキスト領域の形状を変更する方法を学びます。

JavaScript を使用してテキスト領域の形状を変更するには、さまざまな値を持つさまざまな CSS プロパティを使用して、さまざまな構造でテキスト領域の形状を整えることができます。

テキスト領域を平行四辺形に変更します

テキスト領域の形状を平行四辺形に変更するには、JavaScript で CSS の style.transform プロパティを使用し、skew() で指定された値を使用します。 ＃＃＃文法＃＃＃

次の構文は、上記のメソッドを使用してテキスト領域の形状を変更する方法を理解するのに役立ちます -

リーリー

コード例で実際に実装し、テキスト領域の形状がどのように変化するかを見てみましょう。

＃＃＃アルゴリズム＃＃＃

ステップ 1

- 最初のステップでは、HTML ドキュメントにテキスト領域を追加し、後で JavaScript を使用してその形状を変更します。

• ステップ 2
- このステップでは、onclick イベントが関連付けられたボタン要素を追加し、後でボタンがクリックされたときに関数を呼び出してテキストエリアの形状を変更します。

• ステップ 3
- 次のステップでは、上で記述した構文を使用して textarea 要素を取得し、その形状を平行四辺形に変更する JavaScript 関数を定義します。

• ステップ 4

- 最後のステップでは、ボタンの onclick イベントに値として JavaScript 関数を割り当て、後でボタンがクリックされたときにこの関数が呼び出されるようにします。

• ＃＃＃例＃＃＃ 次の例では、CSS の

  transform
プロパティを使用してテキスト領域の形状を平行四辺形に変更する方法を説明します -

リーリー

上の例では、Transform プロパティと skew() 値を使用して、テキスト領域の形状を平行四辺形に変更しました。

テキスト領域の形状を楕円形に変更します テキスト領域の形状を楕円形に変更するには、JavaScript で CSS の borderRadius プロパティを 50% の値で使用します。

＃＃＃文法＃＃＃

次の構文に従い、

borderRadius

プロパティを使用して、テキスト領域の形状を楕円に変更できます -

リーリー

このメソッドがどのように機能するかを理解するために、このメソッドの実際の実装を見てみましょう。

＃＃＃アルゴリズム＃＃＃

この例のアルゴリズムは、前の例のアルゴリズムとほぼ同様です。必要なのは、いくつかの小さな変更を加えて、上記の例の

transform

プロパティを borderRadius プロパティに置き換え、その値を

50%

に設定することです。テキストを取得します。面積は楕円形。

＃＃＃例＃＃＃

次の例は、borderRadius を使用してテキスト領域の形状を楕円形に変更する方法を示しています -

リーリー

上記の例では、JavaScript を使用して、borderRadius プロパティを使用してテキスト領域の形状を長方形から楕円形に変更します。 この記事では、テキスト領域の形状を 2 つの異なる形状に変更する 2 つの異なる方法について、各方法のコード例を使用して詳しく説明します。 JavaScript の他の CSS プロパティを使用してテキストエリアの形状を別の形状に変更することもできるので、検索して学習を続けてください。

以上がJavaScript を使用してテキスト領域の形状を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。