5
<span> 또는 다른 태그를 사용하여 HTML 문서의 텍스트를 강조 표시 할 수 있습니까?HTML 텍스트를 태그로 묶지 않고 강조 표시하는 방법은 무엇입니까?
예를 들어, <p>The quick fox</p>의 HTML 코드에서 DOM 요소를 추가하지 않고 quick을 강조하고 싶습니다. 부모 요소에 DOM 요소를 추가하는 것이 좋습니다.
감사합니다.
A
답변
8
아니요, 불가능합니다.
DOM을 본질적으로 변경하지 않고 브라우저에서 텍스트를 다르게 렌더링하도록 브라우저에 지시 할 수 없습니다 (예 : 사후 처리 단계와 같이 자바 스크립트를 사용).
+1
투명 캔버스 오버레이에서 픽셀을 변경하는 경우 DOM을 변경할 필요가 없습니다. –
+0
DOM을 변경하지 않고 텍스트의 절대 위치를 얻으려면 어떻게해야할까요? –
+0
DOM에 요소를 추가하고 위치를 찾은 다음 삭제하고 표준화()하십시오. – Sleepster
0
불가능합니다.
원래 소스 코드에 태그가 없으면 나중에 Javascript 매직을 사용하여 태그를 추가하는 것이 가능할 수 있습니다.
<p highlight="quick">The quick fox</p>
등의 작업을 수행 할 수 있으며 JQuery/Prototype/plain JS 함수를 사용하여 즉시 강조 표시 할 수 있지만 그 이유는 무엇입니까? 조금 정교하게 만들면 누군가 아이디어를 내놓을 수 있습니다.
0
내가 할 수있는 유일한 방법은 <canvas> 요소를 사용하는 것이고 모든 것을 직접 손으로 렌더링하는 것입니다.
1
투명한 반복 배경 이미지 또는 투명 배경색 (rgba 또는 hsla 사용)이있는 절대 위치 요소를 사용하여 선택한 영역 위에 배치 할 수 있습니다.
또 다른 방법은 전체 브라우저 뷰포트를 차지하고 선택 영역 위에 투명 사각형을 그려야하는 배경이없는 절대 배치 된 캔버스 요소를 만드는 것입니다.
+0
DOM을 변경하지 않고 텍스트의 절대 위치를 어떻게 얻을 수 있습니까? –
+0
요소를 DOM에 추가하고 위치를 찾은 다음 삭제하고 표준화()하십시오. – Sleepster
왜이 작업을 수행 하시겠습니까? – DOK
경계 상자를 사용하여 여러 검색 항목을 강조하고 싶습니다. 그러나 "빠른"과 "빠른 여우"와 같은 2 가지 검색 항목을 상상해보십시오. "빠른"을 배치하여 강조 표시하면 별도의 텍스트 노드가되어 "빠른 여우"를 찾기가 어려울 것입니다. 내가 생각하고있는 기술은 다음과 같습니다. 1. 일시적으로 요소를 추가합니다. 2. offset(), width, height를 사용하여 요소의 경계 상자 찾기. 3. 위의 요소를 삭제하십시오. 4. 위의 크기를 가진 상자를 컨테이너에 추가하십시오. 텍스트가 줄 바꿈되지 않으면 작동 할 수 있습니다. – Sleepster