이 연구는 JavaScript에서 텍스트의 색상을 변경하는 방법을 설명합니다.
JavaScript에서 텍스트 색상을 변경하는 방법?
JavaScript에서 텍스트 색상을 변경하려면 아래에 언급된 사전 정의된 JavaScript 메소드를 사용하십시오.
이러한 방법을 개별적으로 설명하겠습니다.
방법 1: getElementById() 메서드와 함께 style.color 속성을 사용하여 텍스트 색상 변경
텍스트의 색상을 변경하려면 ' getElementById() '와 ' 스타일.색상 ' 재산. 이러한 시나리오에서는 getElementById() 메서드를 사용하여 텍스트 요소에 액세스한 다음 HTML style.color 속성을 사용하여 color 속성을 적용할 수 있습니다.
통사론
getElementById() 메소드의 도움으로 color 속성을 사용하여 텍스트 색상을 변경하기 위해 주어진 구문을 사용하십시오:
문서. getElementById ( 'ID' ) . 스타일 . 색깔 = '색깔' ;' ID '는 텍스트 요소에 액세스한 다음 style.color 속성을 사용하여 색상을 변경하기 위해 지정된 요소의 ID입니다.
명시된 개념을 이해하려면 아래 예를 참조하십시오!
예시
먼저 다음을 사용하여 제목을 만듭니다. 태그 및 id 할당 ' ID ' h4 요소에 액세스하는 데 사용되는 ' 색상 변경() '추가된 버튼의 onclick 이벤트가 발생하면 JavaScript(JS) 파일에 정의됩니다.
< h4 아이디 = 'ID' > LinuxHint에 오신 것을 환영합니다. h4 >< 버튼 유형 = '단추' 클릭 = '색상 변경()' > 마법을 보려면 클릭하십시오 단추 >
JS 파일에서 ' 색상 변경() ”하고 id를 getElementById() 메서드에 전달하여 제목을 가져온 다음 색상을 변경합니다.
기능 변경색상 ( ) {문서. getElementById ( 'ID' ) . 스타일 . 색깔 = '빨간색' ;
}
마지막으로 HTML 파일의 src 태그를 사용하여 JavaScript 파일의 소스를 지정합니다.
< 스크립트 src = './JSfile.js' > 스크립트 >추가된 버튼을 클릭했을 때 텍스트 요소의 색상이 ' 빨간색 ':
다른 방법을 알아보자!
방법 2: querySelector() 메서드와 함께 style.color 속성을 사용하여 텍스트 색상 변경
'를 사용하여 텍스트 색상을 변경할 수도 있습니다. 쿼리 선택기() style.color 속성이 있는 '메소드. getElementById() 메서드가 할당된 ID를 가진 요소를 가져오는 동안 id 또는 할당된 클래스가 있는 요소에 액세스합니다.
통사론
querySelector() 메서드를 사용하여 color 속성을 사용하여 텍스트 색상을 변경하려면 다음 구문을 사용하십시오.
문서. 쿼리 선택기 ( '아이디/클래스명' ) . 스타일 . 색깔 = '색깔' ;예시
여기에서 우리는 '라는 클래스가 있는 단락을 추가하는 태그 색깔 ',
요소와 JavaScript를 호출하는 버튼에 액세스하는 데 도움이 됩니다. 색상 변경() ” 메서드는 onclick 이벤트가 트리거될 때 다음을 수행합니다.
< 피 수업 = '색깔' > LinuxHint에 오신 것을 환영합니다. 피 >< 버튼 클릭 = '색상 변경()' > 마법을 보려면 클릭하십시오 단추 >
'의 정의에서 색상 변경() ' 메서드를 호출하면 ' 쿼리 선택기() ” 메서드는 요소가 해당 클래스 이름을 기반으로 액세스되었음을 나타내는 점(.)으로 클래스 이름을 전달한 다음 여기에 color 속성을 적용합니다.
기능 변경색상 ( ) {문서. 쿼리 선택기 ( '.색깔' ) . 스타일 . 색깔 = '마젠타' ;
}
그러나 HTML 요소에서 id를 사용하고 querySelector() 메서드를 사용하여 액세스하려면 ' # ' ID 이름이 있는 기호:
문서. 쿼리 선택기 ( '#색깔' ) . 스타일 . 색깔 = '마젠타' ;산출
JavaScript에서 텍스트 색상을 변경하는 가장 간단한 방법을 모았습니다.
결론
텍스트 색상을 변경하려면 getElementById() 메서드 또는 querySelector() 메서드를 사용하여 style.color 속성을 사용할 수 있습니다. getElementById() 메서드는 할당된 ID를 기반으로 HTML 요소에 액세스하는 데 사용되는 반면 querySelector() 메서드는 할당된 ID 또는 클래스를 기반으로 요소에 액세스하는 데 각각 (#) 또는 (.) 기호를 지정하는 데 사용됩니다. 이 연구는 JavaScript에서 텍스트 색상을 변경하는 간단한 절차를 보여줍니다.