JavaScript를 사용하여 텍스트의 글꼴 두께를 변경하는 방법은 무엇입니까?

JavaScript를 사용하는 것은 웹 페이지 텍스트의 글꼴 두께를 변경하는 가장 잘 알려진 방법 중 하나입니다. JavaScript와 HTML 요소를 사용하여 대화형 애플리케이션을 구축할 수 있습니다. 글꼴 두께는 문자의 두께를 나타냅니다. 이번 글에서는 자바스크립트를 사용하여 텍스트의 글꼴 두께를 변경하는 방법을 알아봅니다.

스타일 글꼴Weight 속성 사용

단락이나 제목 등 단일 요소의 글꼴 두께를 변경하는 방법을 살펴보겠습니다. 이를 위해 요소의 "style.fontWeight" 속성을 사용합니다. 이 속성은 모든 CSS 속성과 해당 값을 포함하는 객체입니다.

문법

다음 구문을 사용하여 텍스트의 글꼴 두께를 변경할 수 있습니다.

으아악

여기서 FontWeight 속성에 대해 "normal", "lighter", "bold", "bold" 또는 100에서 900 사이의 값을 지정할 수 있습니다.

따라서 숫자와 키워드라는 두 가지 방법으로 FontWeight 속성에 값을 할당할 수 있습니다.

예: FontWeight 속성에 숫자 할당

이 방법을 사용하여 HTML 요소의 글꼴 두께를 변경하려면 숫자를 100에서 900 사이로 설정해야 합니다. 제목 요소의 글꼴 두께를 변경하기 위해 숫자를 사용하는 예를 살펴보겠습니다.

으아악

예제에서 볼 수 있듯이 여기서는 getElementById 메서드를 사용하여 ID가 ​​"myHeading"인 제목 요소를 선택한 다음 개체의 글꼴 가중치 속성을 300으로 설정하고 개체의 텍스트를 300으로 설정합니다. . 제목 요소가 평소보다 가볍습니다.

예: FontWeight 속성에 키워드 할당

이 방법을 사용하여 HTML 요소의 글꼴 두께를 변경하려면 Normal, Bold 또는 Bold를 사용할 수 있습니다. 글꼴 가중치를 보통으로 설정하는 것은 글꼴 가중치를 400으로 설정하는 것과 같고, 글꼴 가중치를 굵게 설정하는 것은 글꼴 가중치를 700으로 설정하는 것과 같습니다.

으아악

예에서 볼 수 있듯이 여기서는 getElementById 메서드를 사용하여 ID가 ​​"myParagraph"인 단락 요소를 선택한 다음 개체의 글꼴 가중치 속성을 "bolder"로 설정합니다. 이를 "bolder"로 설정합니다. 단락 요소의 텍스트를 이전보다 굵게 만듭니다.

여러 요소의 글꼴 두께 변경

문서의 모든 단락과 같이 여러 요소의 글꼴 두께를 한 번에 변경하려는 경우 "querySelectorAll" 메서드를 사용할 수 있다고 가정해 보겠습니다. 주어진 CSS 선택기와 일치하는 모든 HTML 요소의 노드 목록을 반환합니다.

예: forEach 메서드 사용

forEach 메소드를 사용하여 문서 내 단락의 모든 요소의 글꼴 두께를 변경하는 예를 살펴보겠습니다.

으아악

위 예에서는 "querySelectorAll"을 사용하여 HMTL 문서에 있는 단락의 모든 요소를 ​​선택합니다. 그런 다음 노드 목록의 forEach 메서드를 사용하여 모든 단락을 반복하고 글꼴 두께를 700으로 설정합니다.

"forEach" 메서드는 노드 목록을 반복하는 유용한 방법입니다. 이를 통해 목록의 각 요소에 대해 기능을 수행할 수 있습니다. 이 예에서는 각 단락 요소 스타일 개체의 "fontWeight" 속성을 700으로 설정했습니다.

예: for-of 루프 방법 사용

for-of 루프 방법을 사용하여 문서에 있는 여러 요소의 글꼴 두께를 변경하는 또 다른 예를 살펴보겠습니다. for-of 루프는 노드 목록을 반복하는 전통적인 방법 또는 다른 방법입니다.

으아악

이 예에서는 "for-of" 루프를 사용하여 단락을 반복하고 글꼴 두께를 700으로 설정합니다. for 루프와 for-of 루프의 차이점은 for-of 루프를 사용하면 노드 목록의 요소에 직접 액세스할 수 있는 반면 for 루프에서는 해당 인덱스에 액세스할 수 있다는 것입니다.

결론

이 기사에서는 예제를 통해 텍스트의 글꼴 두께를 변경하는 방법을 성공적으로 시연했습니다. 여기에서는 JavaScript를 사용하여 단일 요소와 여러 요소의 글꼴 두께를 변경하는 다양한 예를 볼 수 있습니다. 우리는 여러 요소에 대해 forEach 메서드와 for-of 메서드를 사용하여 두 가지 다른 예제를 작성했습니다.

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