특정 양식이나 설문지를 작성하는 과정에서 선택한 옵션에 대한 응답으로 특정 답변이나 알림을 표시해야 하는 상황이 종종 있습니다. 예를 들어 객관식 문제 등을 다룰 때 자바스크립트를 사용하여 레이블 텍스트를 변경하면 HTML 양식의 접근성과 전체 문서 디자인의 접근성을 높이는 데 큰 도움이 됩니다.
JavaScript를 사용하여 레이블 텍스트를 변경하는 방법은 무엇입니까?
다음 접근 방식을 사용하여 JavaScript에서 레이블 텍스트를 변경할 수 있습니다.
-
- ' 내부HTML ' 재산.
- ' 내부텍스트 ' 재산.
- 제이쿼리 ' 텍스트() ' 그리고 ' HTML() '방법.
접근 방식 1: innerHTML 속성을 사용하여 JavaScript에서 레이블 텍스트 변경
' 내부HTML ” 속성은 요소의 내부 HTML 콘텐츠를 반환합니다. 이 속성은 특정 레이블을 가져오고 해당 텍스트를 새로 할당된 텍스트 값으로 변경하는 데 사용할 수 있습니다.
통사론
element.innerHTML
위 구문에서:
-
- ' 요소 '는 HTML 콘텐츠를 반환하기 위해 특정 속성이 적용될 요소를 나타냅니다.
예시
명시된 개념을 명확하게 설명하려면 다음 코드 스니펫을 살펴보세요.
< 센터 >< 신체 >
< 상표 ID = '이블' > DOM 상표 >
< 브 >< 브 >
< 단추 클릭 = '라벨텍스트()' > 여기를 클릭하십시오 단추 >
신체 > 센터 >
-
- 먼저 ' <중앙> ' 태그에는 ' 상표 '로 지정된 ' ID ' 그리고 ' 텍스트 ' 값.
- 그런 다음 ' 클릭 'labelText() 함수를 호출하는 이벤트.
이제 아래 주어진 JavaScript 코드를 따르십시오.
기능 라벨텍스트 ( ) {허락하다 가져오기 = 문서.getElementById ( '블' )
get.innerHTML= '약칭은 Document Object Model입니다.' ;
}
-
- '라는 이름의 함수를 선언하십시오. 레이블 텍스트() '.
- 정의에서 지정된 ' 상표 '를 사용하여 ' 문서.getElementById() ' 방법.
- 마지막으로 innerHTML 속성을 적용하고 새로운 ' 텍스트 ' 값을 액세스된 레이블에 추가합니다. 그러면 버튼 클릭 시 레이블 텍스트가 새 텍스트 값으로 변환됩니다.
산출
위의 출력에서 ' 상표 '는 DOM과 코드 모두에서 변경됩니다. 집단 ' 부분.
접근 방식 2: innerText 속성을 사용하여 JavaScript에서 레이블 텍스트 변경
' 내부텍스트 ' 속성은 요소의 텍스트 내용을 반환합니다. 이 속성은 입력 필드에 입력된 사용자 입력 값을 할당된 레이블의 텍스트에 할당하도록 구현될 수 있습니다.
통사론
element.innerText
위 구문에서:
-
- ' 요소 '는 텍스트 내용을 반환하기 위해 특정 속성이 적용될 요소를 나타냅니다.
예시
다음 예는 명시된 개념을 보여줍니다.
< 센터 >< 신체 >이름 입력: < 입력 유형 = '텍스트' ID = '이름' 값 = '' 자동 완성 = '끄다' >
< 피 >< 입력 유형 = '단추' ID = '비티' 값 = '라벨 텍스트 변경' 클릭 = '라벨텍스트()' > 피 >
< 상표 ID = '이블' > N / ㅏ 상표 >
신체 > 센터 >
-
- 먼저 ' ID '. ' 없는 '값은 사용자로부터 값을 가져오고 자동 완성을 '로 설정함을 나타냅니다. 끄다 '는 제안된 값을 피할 것입니다.
- 그런 다음 ' ID ' 그리고 ' 텍스트 ' 값.
이제 JavaScript 코드 스니펫에서 다음 단계를 수행하십시오.
기능 라벨텍스트 ( ) {허락하다 가져오기 = 문서.getElementById ( '블' ) ;
허락하다 이름 = 문서.getElementById ( '이름' ) .값;
get.innerText = 이름;
}
-
- '라는 함수를 정의하십시오. 레이블 텍스트() '. 정의에서 ' 문서.getElementById() ' 방법.
- 마찬가지로 위의 단계를 반복하여 지정된 입력 텍스트 필드에 액세스하고 이 필드에서 사용자가 입력한 값을 가져옵니다.
- 마지막으로 이전 단계에서 사용자가 입력한 값을 가져온 레이블에 할당합니다. 이렇게 하면 레이블 텍스트가 입력 텍스트 필드에 사용자가 입력한 값으로 변경됩니다.
산출
위의 결과에서 원하는 요구 사항이 달성되었음을 알 수 있습니다.
접근 방식 3: jQuery text() 및 html() 메서드를 사용하여 JavaScript에서 레이블 텍스트 변경
' 텍스트() ' 메서드는 선택한 요소의 텍스트 내용을 반환합니다. ' HTML() ' 메서드는 선택한 요소의 innerHTML 내용을 반환합니다.
통사론
$ ( 선택자 ) .텍스트 ( )
이 구문에서:
-
- ' 선택자 '는 액세스된 요소의 텍스트 내용을 가리킵니다.
위에 주어진 구문에서:
-
- ' 선택자 '는 액세스된 요소의 innerHTML을 나타냅니다.
예시
이 예제는 jQuery 메서드를 사용하여 명시된 개념을 설명합니다.
아래에 제공된 코드 스니펫을 살펴보세요.
< 스크립트 src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > 스크립트 >< 센터 >< 신체 >
< 상표 ID = 'lbl1' > 다음 웹사이트입니다. 상표 >
< 브 >< 브 >
< 상표 ID = 'lbl2' > 콘텐츠: 상표 >
< 브 >< 브 >
< 단추 클릭 = '라벨텍스트()' > 딸깍 하는 소리 ~을 위한 웹사이트 단추 >
< 단추 클릭 = '라벨텍스트2()' > 딸깍 하는 소리 ~을 위한 콘텐츠 단추 >
신체 > 센터 >
-
- 먼저 ' 제이쿼리 ' 라이브러리를 사용하여 해당 메서드를 적용합니다.
- 그 후 ' <중앙> ' 태그, 지정된 ' ID ' 및 각각에 대한 텍스트 값입니다.
- 또한 생성된 각 레이블에 별도의 버튼을 할당합니다. 두 버튼 모두 ' 클릭 ” 두 개의 서로 다른 지정된 함수를 호출하는 이벤트입니다.
이제 다음 JavaScript 코드 행을 살펴보십시오.
기능 라벨텍스트 ( ) {$ ( '#lbl1' ) .텍스트 ( '리눅스' )
}
기능 라벨텍스트2 ( ) {
$ ( '#lbl2' ) .html ( '자바스크립트' )
}
-
- 첫 번째 단계에서 ' 레이블 텍스트() '.
- 정의에서 가져온 ' ID '를 적용하고 ' 텍스트() '라는 방법입니다. 그러면 레이블의 텍스트 값이 매개변수의 지정된 값으로 변경됩니다.
- 마찬가지로 ' 라벨텍스트2() '.
- 여기에서도 마찬가지로 레이블에 액세스하기 위해 위에서 설명한 단계를 반복합니다. 이 경우 ' HTML() ' 방법. 이 메서드도 같은 방식으로 작동하고 지정된 텍스트 값을 반환하여 레이블 텍스트를 변경합니다.
산출
위 출력에서 DOM(Document Object Model)에 있는 레이블의 첫 번째 변환된 텍스트 값은 jQuery ' 텍스트() ' 방법이고 다른 하나는 ' HTML() ' 방법.
JavaScript를 사용하여 레이블 텍스트를 변경하는 접근 방식을 컴파일했습니다.
결론
' 내부HTML ' 속성, ' 내부텍스트 ' 속성 또는 jQuery의 ' 텍스트() ' 그리고 ' HTML() ' 메서드는 JavaScript를 사용하여 레이블 텍스트를 변경하는 데 사용할 수 있습니다. innerHTML 속성을 적용하여 특정 레이블을 가져오고 해당 텍스트 내용을 새로 할당된 텍스트 값으로 변경할 수 있습니다. innerText 속성을 구현하여 액세스한 레이블에 새 텍스트 값을 할당하여 변경할 수 있습니다. jQuery 접근 방식은 두 가지 방법을 사용하여 레이블의 텍스트 값을 변환하는 데 사용할 수 있으며 결과적으로 두 개의 다른 할당된 텍스트 값의 형태로 동일한 결과를 얻을 수 있습니다. 이 글은 JavaScript를 사용하여 레이블 텍스트를 변경하는 기술을 보여주었습니다.