JavaScript를 사용하여 텍스트 영역의 모양을 변경하는 방법은 무엇입니까?

Textarea는 동적 너비와 높이가 있는 상자입니다. 즉, 텍스트를 입력하면 텍스트가 넘치지 않고 높이와 너비를 동적으로 늘리거나 줄일 수 있으므로 해당 texarea 내에만 포함됩니다. Textarea는 주로 사용자의 전체 주소와 큰 텍스트 콘텐츠가 포함된 기타 콘텐츠를 얻기 위해 양식 내부에서 사용됩니다.

일반적으로 텍스트 영역은 정사각형이나 직사각형 형태이며 JavaScript 및 CSS를 사용하여 변경할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 텍스트 영역의 모양을 변경하는 방법을 알아 보겠습니다.

JavaScript를 사용하여 텍스트 영역의 모양을 변경하려면 다양한 값을 가진 다양한 CSS 속성을 사용하여 다양한 구조로 텍스트 영역의 모양을 지정할 수 있습니다.

텍스트 영역을 평행사변형으로 변경

텍스트 영역의 모양을 평행사변형으로 변경하려면 JavaScript에서 CSS의 style.transform 속성을 사용하고 skew()에서 제공하는 값을 사용할 수 있습니다.

문법

다음 구문은 위 방법을 사용하여 텍스트 영역의 모양을 변경하는 방법을 이해하는 데 도움이 됩니다. -

으아악

코드 예시를 통해 실제로 구현하여 자세히 알아보고, 텍스트 영역의 모양이 어떻게 변하는지 살펴보겠습니다.

알고리즘

• 1단계 - 첫 번째 단계에서는 HTML 문서에 텍스트 영역을 추가하고 나중에 JavaScript를 사용하여 모양을 변경합니다.

• 2단계 - 이 단계에서는 onclick 이벤트와 관련된 버튼 요소를 추가하고 나중에 버튼을 클릭할 때 함수를 호출하고 텍스트 영역의 모양을 변경합니다.

• 3단계 - 다음 단계에서는 위에서 작성한 구문을 사용하여 텍스트 영역 요소를 잡고 그 모양을 평행사변형으로 변경하는 JavaScript 함수를 정의합니다.

• 4단계 - 마지막 단계에서는 나중에 버튼을 클릭할 때 함수가 호출되도록 버튼의 onclick 이벤트에 JavaScript 함수를 값으로 할당합니다.

예

다음 예에서는 CSS의 transform 속성을 사용하여 텍스트 영역의 모양을 평행사변형으로 변경하는 방법을 설명합니다. -

으아악

위 예에서는 Skew() 값과 함께 Transform 속성을 사용하여 텍스트 영역의 모양을 평행사변형으로 변경했습니다.

텍스트 영역 모양을 타원형으로 변경

텍스트 영역의 모양을 타원형으로 변경하려면 JavaScript에서 CSS의 borderRadius 속성을 값 50%로 사용할 수 있습니다.

문법

다음 구문에 따라 borderRadius 속성을 사용하여 텍스트 영역의 모양을 타원으로 변경할 수 있습니다. -

으아악

이 메서드가 어떻게 작동하는지 이해하기 위해 실제 구현을 살펴보겠습니다.

알고리즘

이 예제의 알고리즘은 이전 예제의 알고리즘과 거의 유사합니다. 약간의 변경만 하면 됩니다. 위 예의 transform 속성을 borderRadius 속성으로 바꾸고 해당 값을 50%로 설정하여 텍스트 영역의 타원형 모양을 얻으면 됩니다.

예

아래 예에서는 borderRadius를 사용하여 텍스트 영역의 모양을 타원형으로 변경하는 방법을 보여줍니다. -

으아악

위 예에서는 JavaScript를 사용하여 borderRadius 속성을 사용하여 텍스트 영역의 모양을 직사각형에서 타원으로 변경했습니다.

이 기사에서는 각 방법에 대한 코드 예제를 사용하여 텍스트 영역의 모양을 두 가지 다른 모양으로 변경하는 두 가지 방법을 자세히 논의했습니다. JavaScript의 다른 CSS 속성을 사용하여 텍스트 영역의 모양을 다른 모양으로 변경할 수도 있으므로 계속 검색하고 학습하세요.

위 내용은 JavaScript를 사용하여 텍스트 영역의 모양을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!