JavaScript를 사용하여 웹 페이지의 텍스트를 어떻게 강조할 수 있습니까?

JavaScript로 텍스트 강조표시

웹페이지에서 텍스트 강조표시는 중요한 정보를 강조하거나 특정 콘텐츠에 관심을 집중시키는 데 유용한 기능입니다. 다양한 기술이 존재하지만 이 기사에서는 간단한 JavaScript 구현을 살펴봅니다.

코드 조각:

제공된 JavaScript 함수인 하이라이트()는 특정 HTML 요소(예: 단락) 내에서 지정된 텍스트입니다. 작동 방식은 다음과 같습니다.

1. 이 함수는 강조 표시할 하위 문자열로 단일 인수(텍스트)를 사용합니다.
2. ID가 "inputText"인 HTML 요소에서 입력 텍스트를 검색합니다. ".
3. 입력된 텍스트 내에서 해당 텍스트가 나타나는 인덱스를 계산합니다.
4. 텍스트가 발견되면, 발견된 인스턴스를 ""로 래핑합니다. CSS 섹션에 정의된 "highlight" 클래스를 포함하는 요소.

사용 예:

이 기능을 활용하려면 다음 위치에 JavaScript 코드를 포함하세요. HTML 문서를 작성하고 onClick 이벤트를 버튼이나 링크에 첨부하세요. 클릭하면 이벤트가 함수 호출을 트리거하고 강조 표시할 텍스트를 매개변수로 전달합니다. 예:

<button onclick="highlight('fox')">Highlight</button>
<div>

이 예에서 버튼을 클릭하면 "inputText" 요소에서 "fox"라는 단어가 처음으로 강조 표시됩니다.

CSS 사용자 정의:

CSS에서 "highlight" 클래스의 스타일을 재정의하여 강조 표시된 모양을 추가로 사용자 정의할 수 있습니다. 주어진 예에서는 강조 표시된 텍스트에 노란색 배경색을 적용했지만 디자인 요구 사항에 맞게 조정할 수 있습니다.

이러한 기술을 적용하면 웹 페이지의 특정 텍스트를 쉽게 강조 표시하여 사용자가 빠르게 중요한 정보를 찾아 집중하세요.

위 내용은 JavaScript를 사용하여 웹 페이지의 텍스트를 어떻게 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!