突出顯示動態生成的文本

Question

我正在創建一個頁面以顯示pdf，並使用Mozilla的pdf.js項目渲染了pdf。

pdf.js在canvas標簽下制作了多個動態div呈現文本。 我想突出顯示我的pdf文本。 以下是pdf.js動態生成的代碼：

<div id="pageContainer1" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
<canvas id="page1" width="741" height="959"></canvas>
<div class="textLayer">
<div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbsp;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
</div>
</div>

誰能給我一種方法，用Javascript突出顯示上述代碼中的文本（如果可能）？

Answer 1

鑒於<div class="textLayer">...</div>只是動態生成文本的容器，並且該結構保持不變，因此您可以執行以下操作：

var dynElems = document.getElementsByClassName('textLayer');
for (var i=0; i<dynElems.length; i++) {
    dynElems[i].className += " highlight";
}

請注意，使用jQuery可能會更簡單：

$('.textLayer').addClass('highlight');

然后，您需要根據需要添加突出顯示類的定義，例如

.textLayer.highlight>div {
    background-color: #EFEFEF;
}

就是說，您可以完全跳過JS，只需將此樣式添加到標頭即可：

.textLayer>div {
    background-color: #EFEFEF;
}