JavaScript를 사용하여 입력 상자 테두리를 채운 후 어떻게 변경합니까?

style.border 속성은 요소의 테두리를 변경하는 데 사용됩니다. 이 속성은 요소의 세 가지 테두리 하단 속성, 즉 border-color, border-style 및 border-width를 반환합니다. HTML 스타일 객체 속성 중 하나입니다.

상자를 채운 후 변경 사항이 적용되도록 onchange 이벤트를 사용합니다. onchange는 HTML 요소의 값이 변경될 때 발생하는 JavaScript 속성 중 하나입니다. 또한 선택한 상태가 변경되면 라디오 버튼 및 확인란과 함께 작동합니다.

onchange 이벤트는 HTML 요소와 함께 사용할 수도 있습니다. onchange 이벤트는 oninput 이벤트와 매우 유사합니다. 그러나 oninput 이벤트는 요소의 값이 변경된 직후에 발생하는 반면 onchange 이벤트는 요소가 포커스를 잃었을 때 발생합니다.

이 글에서는 JavaScript를 사용하여 입력 상자 테두리를 채운 후 변경하는 방법을 알아봅니다.

문법

다음은 상자를 채운 후 입력 상자 테두리를 변경하는 style.border 속성의 구문입니다 -

으아아아

매개변수

• width – 테두리 너비를 설정하는 데 사용됩니다. 너비 값을 Thick, Thin, Medium 또는 px 값(예: 10px)으로 전달할 수 있습니다.

• style – 테두리 스타일을 설정하는 데 사용됩니다. 스타일 값을 "solid", "dotted", "double" 등으로 전달할 수 있습니다.

• color – 테두리 색상을 설정하는 데 사용됩니다.

• initial – 속성을 기본값으로 설정하는 데 사용됩니다.

• inherit – 상위 요소에서 속성을 상속하는 데 사용됩니다.

반환 값

StyleBorder는 요소 테두리의 색상, 너비 및 스타일을 나타내는 문자열 값을 반환합니다.

단계

상자를 채운 후 아래 단계에 따라 입력 상자 테두리를 변경해야 합니다. -

• 1단계 - 텍스트 및 버튼 유형의 입력 필드로 양식 요소를 정의합니다.

• 2단계 - 스크립트 코드는 상자를 채운 후 입력 상자의 테두리를 변경하는 기능을 정의합니다.

• 3단계 - JavaScript 섹션에서 요소의 값이 변경될 때 발생하는 onchange 이벤트를 선언합니다.

• 4단계 - style.border는 요소의 아래쪽 테두리를 변경하는 데 사용되는 HTML DOM 배경 속성입니다.

• 5단계 - 사용자가 입력 값에 값을 추가할 때마다 onchange 이벤트가 발생하고 해당 이벤트가 발생하면 값이 null인지 확인합니다. 값이 존재하고 비어 있지 않은 경우 테두리 하단이 녹색 점선으로 변경됩니다.

예

아래 예에서는 JavaScript를 사용하여 첫 번째 입력 상자의 채워진 테두리를 "10px 단색 녹색"으로 변경하고 두 번째 입력 상자 테두리를 "3px 점선 빨간색"으로 변경합니다.

으아아아

예

입력창 하단 테두리만 변경

이 예에서는 스타일 borderBottom 속성을 사용하여 입력 상자의 아래쪽 테두리를 변경합니다. 변경 사항을 적용하려면 onchange 이벤트 속성을 사용합니다.

으아아아

결론

이 글에서는 입력 상자를 채운 후 테두리를 변경하는 방법을 예시로 보여줍니다. 두 입력 필드 모두에 텍스트를 입력할 때마다 아래쪽 테두리가 녹색으로 바뀌는 황갈색 예를 보았습니다. 두 입력 필드의 값이 모두 비어 있으면 색상이 변경되지 않으며 값이 있는 경우에만 변경됩니다.

위 내용은 JavaScript를 사용하여 입력 상자 테두리를 채운 후 어떻게 변경합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!