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;
}

突出显示动态生成的文

1 个答案: