style.border 속성은 요소의 테두리를 변경하는 데 사용됩니다. 이 속성은 요소의 세 가지 테두리 하단 속성, 즉 border-color, border-style 및 border-width를 반환합니다. HTML 스타일 객체 속성 중 하나입니다.
상자를 채운 후 변경 사항이 적용되도록 onchange 이벤트를 사용합니다. onchange는 HTML 요소의 값이 변경될 때 발생하는 JavaScript 속성 중 하나입니다. 또한 선택한 상태가 변경되면 라디오 버튼 및 확인란과 함께 작동합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
